<?php
/**
 * MSIGN.PARTY — index.php
 * All data starts from 0. No mock/demo data.
 */
session_start();

// ── Auth helpers ───────────────────────────────────────────────
$loggedIn   = isset($_SESSION['msign_user']);
$user       = $loggedIn ? $_SESSION['msign_user'] : null;
$username   = $loggedIn ? htmlspecialchars($user['username'])  : 'Guest';
$userAv     = $loggedIn ? strtoupper(substr($user['username'], 0, 2)) : '??';
$userTier   = $loggedIn ? htmlspecialchars($user['tier'] ?? 'Member') : '';
$userColor  = $loggedIn ? ($user['tier'] === 'Administrator' ? 'var(--orange)' : 'var(--cyan)') : 'var(--dim)';
$signsUsed  = $loggedIn ? (int)($user['signs_used']  ?? 0) : 0;
$signsMax   = $loggedIn ? (int)($user['signs_max']   ?? 10) : 10;
$quotaPct   = $signsMax > 0 ? round(($signsUsed / $signsMax) * 100) : 0;
$notifCount = 0;  // start from 0
$pmCount    = 0;  // start from 0
$isAdmin    = $loggedIn && ($user['tier'] ?? '') === 'Administrator';

// ── AJAX: Login ────────────────────────────────────────────────
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    header('Content-Type: application/json');
    $action = $_POST['action'];

    if ($action === 'login') {
        $u = trim($_POST['username'] ?? '');
        $p = $_POST['password'] ?? '';
        // TODO: replace with real DB lookup
        // For now, reject all logins (no accounts exist yet)
        echo json_encode(['ok' => false, 'msg' => 'Invalid username or password.']);
        exit;
    }

    if ($action === 'register') {
        $u     = trim($_POST['username'] ?? '');
        $email = trim($_POST['email'] ?? '');
        $mdid  = trim($_POST['mdid'] ?? '');
        $p1    = $_POST['pass1'] ?? '';
        $p2    = $_POST['pass2'] ?? '';
        if (!preg_match('/^[a-zA-Z0-9_]{3,}$/', $u))                     { echo json_encode(['ok'=>false,'msg'=>'Invalid username.']); exit; }
        if (!filter_var($email, FILTER_VALIDATE_EMAIL))                    { echo json_encode(['ok'=>false,'msg'=>'Invalid email.']); exit; }
        if ($mdid && !preg_match('/^MS-\d{4}-\d{2}$/', $mdid))            { echo json_encode(['ok'=>false,'msg'=>'Invalid MDID format.']); exit; }
        if (strlen($p1) < 8)                                               { echo json_encode(['ok'=>false,'msg'=>'Password must be at least 8 characters.']); exit; }
        if ($p1 !== $p2)                                                   { echo json_encode(['ok'=>false,'msg'=>'Passwords do not match.']); exit; }
        // TODO: save to DB, check for duplicate username/email
        // For now, auto-create session (first user is admin)
        $_SESSION['msign_user'] = [
            'username'   => $u,
            'email'      => $email,
            'mdid'       => $mdid,
            'tier'       => 'Member',
            'signs_used' => 0,
            'signs_max'  => 10,
        ];
        echo json_encode(['ok' => true, 'username' => $u]);
        exit;
    }

    if ($action === 'logout') {
        session_destroy();
        echo json_encode(['ok' => true]);
        exit;
    }

    // IPA upload parse — returns real metadata from uploaded file
    if ($action === 'parse_ipa') {
        if (!isset($_FILES['ipa']) || $_FILES['ipa']['error'] !== UPLOAD_ERR_OK) {
            echo json_encode(['ok'=>false,'msg'=>'Upload failed.']); exit;
        }
        $tmp  = $_FILES['ipa']['tmp_name'];
        $name = basename($_FILES['ipa']['name'], '.ipa');
        $size = round($_FILES['ipa']['size'] / 1048576, 1) . ' MB';
        // Basic ZIP parsing to read Info.plist
        $bundle = '—'; $ver = '—'; $minos = '—'; $arch = '—'; $ent = '0';
        if (class_exists('ZipArchive')) {
            $zip = new ZipArchive();
            if ($zip->open($tmp) === true) {
                for ($i = 0; $i < $zip->numFiles; $i++) {
                    $entry = $zip->getNameIndex($i);
                    if (preg_match('#^Payload/[^/]+\.app/Info\.plist$#', $entry)) {
                        $plist = $zip->getFromIndex($i);
                        if (preg_match('/<key>CFBundleIdentifier<\/key>\s*<string>([^<]+)<\/string>/i', $plist, $m)) $bundle = $m[1];
                        if (preg_match('/<key>CFBundleShortVersionString<\/key>\s*<string>([^<]+)<\/string>/i', $plist, $m)) $ver = $m[1];
                        if (preg_match('/<key>MinimumOSVersion<\/key>\s*<string>([^<]+)<\/string>/i', $plist, $m)) $minos = $m[1];
                        if (preg_match('/<key>CFBundleDisplayName<\/key>\s*<string>([^<]+)<\/string>/i', $plist, $m)) $name = $m[1];
                    }
                    if (preg_match('#^Payload/[^/]+\.app/embedded\.mobileprovision$#', $entry)) {
                        $prov = $zip->getFromIndex($i);
                        preg_match_all('/<key>[^<]+<\/key>/', $prov, $em);
                        $ent = count($em[0]);
                    }
                }
                $zip->close();
            }
        }
        echo json_encode(['ok'=>true,'name'=>$name,'bundle'=>$bundle,'ver'=>$ver,'minos'=>$minos,'arch'=>'arm64','ent'=>$ent,'size'=>$size,'mdid'=>'']);
        exit;
    }

    echo json_encode(['ok'=>false,'msg'=>'Unknown action.']);
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>MSIGN.PARTY — Signing Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap" rel="stylesheet">
<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=Barlow+Condensed:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&family=Barlow:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root {
    --bg:      #0b0b0d;
    --bg-tile: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAALklEQVR4nGMUE5P6+vUzKyvr79+/mb5+/czNzfv7929WVlYmVlZWOJ8JIgbhAwB3fhgrnF/1GAAAAABJRU5ErkJggg==");
    --mid:     #161618;
    --card:    #111113;
    --card2:   #0e0e10;
    --border:  #222226;
    --border2: #1a1a1e;
    --red:     #cc0000;
    --redline: #cc6600;
    --cyan:    #00ccff;
    --green:   #00cc55;
    --orange:  #ff8800;
    --pink:    #ff33ff;
    --yellow:  #ffcc00;
    --white:   #e8e8e8;
    --grey:    #999999;
    --dim:     #555555;
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
body {
    background-color: var(--bg);
    background-image: var(--bg-tile);
    background-repeat: repeat;
    font-family: 'Rajdhani', sans-serif;
    color: var(--white);
    font-size: 13px;
}
a { text-decoration: none; color: var(--cyan); }
a:hover { color: #fff; }

/* ── HEADER ── */

@keyframes gradshift { to { background-position: 200% center; } }
.zs-topnav {
    background: var(--mid);
    border-bottom: 2px solid var(--orange);
}
.zs-topnav-inner {
    max-width: 1100px; margin: 0 auto; width: 100%;
    display: flex; justify-content: space-between; align-items: stretch;
    padding: 0 16px;
}
.zs-topnav-links { display: flex; width: 100%; }
.zs-topnav-links a {
    display: flex; align-items: center; justify-content: center;
    flex: 1; padding: 0 10px; height: 38px;
    font-family: 'Oswald', sans-serif;
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.5px; color: var(--white);
    text-decoration: none; border-right: 1px solid #111;
    transition: background 0.15s; text-transform: uppercase;
    cursor: pointer;
}
.zs-topnav-links a:hover,
.zs-topnav-links a.active { background: rgba(255,255,255,0.05); }
.zs-topnav-links a.portal  { color: var(--cyan); }
.zs-topnav-links a.forum   { color: #a066ff; }
.zs-topnav-links a.credits { color: var(--orange); }
.zs-topnav-links a.upgrade { color: var(--green); }
.zs-topnav-links a.regs    { color: var(--orange); }
.zs-topnav-links a.faq     { color: var(--pink); }
.zs-topnav-search { display:flex; align-items:center; padding:0 10px; }
.zs-topnav-search input {
    background:#0a0a0a; border:1px solid #333; border-right:none;
    color:#fff; padding:5px 12px; font-size:12px; width:180px; height:27px; outline:none;
}
.zs-topnav-search input::placeholder { color:#444; }
.zs-topnav-search button { background:var(--orange); border:none; color:#fff; padding:0 12px; height:27px; cursor:pointer; }

.zs-subnav {
    background: var(--bg); border-bottom: 1px solid #1c1c1c;
    padding: 0;
}
.zs-subnav-inner {
    max-width: 1100px; margin: 0 auto; width: 100%;
    padding: 5px 16px; display: flex; gap: 20px;
}
.zs-subnav a { color:var(--grey); font-size:13px; font-weight:600; text-decoration:none; transition:color 0.15s; }
.zs-subnav a:hover { color:var(--cyan); }

/* ── HEADER BAND ── */
.zs-header-band {
    background: var(--card); border-bottom: 1px solid var(--border);
}
.zs-header-band-inner {
    max-width: 1100px; margin: 0 auto; width: 100%;
    display: flex; min-height: 90px;
    padding: 0 16px;
    box-sizing: border-box;
}
.zs-logo-box {
    background:#111; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:14px 20px; border-right:1px solid var(--border);
    min-width:160px; flex-shrink:0; text-decoration:none;
}
.zs-logo-text { font-family:'Oswald',sans-serif; font-size:34px; font-weight:900; letter-spacing:6px; color:#fff; line-height:1; }
.zs-logo-sub { background:var(--orange); color:#fff; font-size:8px; font-weight:700; letter-spacing:2px; padding:2px 8px; margin-top:7px; text-transform:uppercase; }

/* Portal stats bar */
.zs-stats-bar {
    flex:1; display:flex; align-items:stretch; border-right:1px solid var(--border);
    overflow:hidden;
}
.zs-stat-box {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    border-right:1px solid var(--border2); padding:10px 8px;
    transition:background 0.15s;
}
.zs-stat-box:last-child { border-right:none; }
.zs-stat-box:hover { background:rgba(255,255,255,0.02); }
.zs-stat-val { font-family:'Oswald',sans-serif; font-size:22px; font-weight:700; line-height:1; }
.zs-stat-val.cyan   { color:var(--cyan); }
.zs-stat-val.green  { color:var(--green); }
.zs-stat-val.orange { color:var(--orange); }
.zs-stat-val.pink   { color:var(--pink); }
.zs-stat-val.yellow { color:var(--yellow); }
.zs-stat-lbl { font-size:10px; color:var(--dim); letter-spacing:1px; text-transform:uppercase; margin-top:3px; }

/* Header Staff Picks */
.zs-staff-picks-bar {
    display:flex; flex-direction:column;
    flex:1; border-right:1px solid var(--border); overflow:hidden;
    background: linear-gradient(135deg, rgba(255,204,0,0.03) 0%, transparent 60%);
}
.zs-staff-pick-label {
    display:flex; flex-direction:row; align-items:center;
    padding:5px 12px 4px; gap:6px;
    border-bottom:1px solid var(--border2); flex-shrink:0;
    background:rgba(255,204,0,0.05);
}
.zs-staff-pick-label i { color:var(--yellow); font-size:10px; }
.zs-staff-pick-label span { font-family:'Oswald',sans-serif; font-size:9px; font-weight:700; color:var(--yellow); letter-spacing:2px; text-transform:uppercase; white-space:nowrap; }
/* Side-by-side grid */
.zs-hdr-picks-grid {
    display:grid; grid-template-columns:1fr 1fr; flex:1;
}
.zs-hdr-pick-card {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:0; padding:8px 10px 8px;
    border-right:1px solid var(--border2);
    cursor:pointer; transition:background 0.15s; min-width:0; text-align:center;
}
.zs-hdr-pick-card:last-child { border-right:none; }
.zs-hdr-pick-card:hover { background:rgba(255,204,0,0.05); }
.zs-hdr-pick-ico {
    width:40px; height:40px; border-radius:9px; flex-shrink:0; overflow:hidden;
    background:#111; border:1px solid rgba(255,255,255,0.07); position:relative;
    margin-bottom:6px;
}
.zs-hdr-pick-ico img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.zs-hdr-pick-badge { font-size:7px; font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:0.5px; background:rgba(255,204,0,0.15); color:var(--yellow); border:1px solid rgba(255,204,0,0.3); padding:1px 5px; border-radius:2px; flex-shrink:0; white-space:nowrap; margin-bottom:5px; }
.zs-hdr-pick-info { width:100%; min-width:0; }
.zs-hdr-pick-name { font-family:'Oswald',sans-serif; font-size:12px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; margin-bottom:2px; }
.zs-hdr-pick-sub { font-size:9px; color:var(--dim); margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zs-hdr-pick-meta { display:flex; flex-wrap:wrap; justify-content:center; gap:3px; margin-top:2px; }
.zs-hdr-pick-meta-chip { font-size:8px; font-family:'JetBrains Mono',monospace; color:var(--grey); background:rgba(255,255,255,0.04); border:1px solid var(--border2); border-radius:2px; padding:1px 4px; white-space:nowrap; }

/* User panel */
.zs-user-panel {
    width:220px; flex-shrink:0; padding:12px 0 12px 16px;
    display:flex; flex-direction:column; justify-content:center; gap:6px;
}
.zs-user-top { display:flex; align-items:center; gap:10px; }
.zs-user-av {
    width:40px; height:40px; border-radius:50%;
    background:var(--card2); border:2px solid var(--cyan);
    display:flex; align-items:center; justify-content:center;
    font-family:'Oswald',sans-serif; font-size:15px; font-weight:700; color:var(--cyan);
    flex-shrink:0;
}
.zs-user-name { font-family:'Oswald',sans-serif; font-size:16px; font-weight:700; color:#fff; }
.zs-user-tier { font-size:10px; color:var(--orange); letter-spacing:1px; text-transform:uppercase; }
.zs-user-quota { display:flex; gap:4px; align-items:center; font-size:11px; color:var(--dim); }
.zs-quota-bar { flex:1; height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.zs-quota-fill { height:100%; background:var(--cyan); border-radius:2px; width:20%; }
.zs-quota-fill.warn { background:var(--orange); }
.zs-quota-fill.full { background:var(--orange); }
.zs-user-actions { display:flex; gap:6px; margin-top:2px; }
.zs-user-actions a {
    flex:1; text-align:center; padding:4px 0;
    font-family:'Oswald',sans-serif; font-size:11px; font-weight:600;
    letter-spacing:0.5px; text-transform:uppercase; border:1px solid var(--border);
    color:var(--grey); text-decoration:none; transition:all 0.15s;
}
.zs-user-actions a:hover { border-color:var(--cyan); color:var(--cyan); }
.zs-user-actions a.primary { background:var(--cyan); color:#000; border-color:var(--cyan); }
.zs-user-actions a.primary:hover { background:#00e5ff; }

/* ── PAGE SHELL ── */
.page-wrap {
    max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px;
    display: none; flex-direction: column; gap: 16px;
}
.page-wrap.active { display: flex; }

/* ── PAGE BANNER ── */
.page-banner {
    border-left: 4px solid var(--cyan);
    background: linear-gradient(90deg, rgba(0,204,255,0.06) 0%, transparent 60%);
    padding: 18px 24px;
    display: flex; align-items: center; gap: 20px;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.page-banner.orange { border-left-color: var(--orange); background: linear-gradient(90deg,rgba(255,136,0,0.06) 0%,transparent 60%); }
.page-banner.red    { border-left-color: var(--orange);  background: linear-gradient(90deg,rgba(255,136,0,0.06) 0%,transparent 60%); }
.page-banner.pink   { border-left-color: var(--pink);   background: linear-gradient(90deg,rgba(255,51,255,0.06) 0%,transparent 60%); }
.page-banner.purple { border-left-color: #a066ff;       background: linear-gradient(90deg,rgba(160,102,255,0.06) 0%,transparent 60%); }
.page-banner-icon { font-size: 36px; color: var(--cyan); flex-shrink:0; }
.page-banner.orange .page-banner-icon { color: var(--orange); }
.page-banner.red    .page-banner-icon { color: var(--orange); }
.page-banner.pink   .page-banner-icon { color: var(--pink); }
.page-banner.purple .page-banner-icon { color: #a066ff; }
.page-banner-text h2 {
    font-family:'Oswald',sans-serif; font-size:22px; font-weight:700;
    color:#fff; letter-spacing:1px; margin-bottom:4px; text-transform:uppercase;
}
.page-banner-text p { font-size:13px; color:var(--grey); }

/* ── SECTION CARD ── */
.sec-card { background:var(--card); border:1px solid var(--border); overflow:hidden; }
.sec-head {
    background: linear-gradient(90deg,#1a1a1e,#111113);
    border-left:3px solid var(--cyan); padding:7px 12px;
    display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid var(--border);
}
.sec-head.orange { border-left-color:var(--orange); }
.sec-head.red    { border-left-color:var(--orange); }
.sec-head.green  { border-left-color:var(--green); }
.sec-head.pink   { border-left-color:var(--pink); }
.sec-head.purple { border-left-color:#a066ff; }
.sec-head-title {
    font-family:'Oswald',sans-serif; font-size:13px; font-weight:600;
    letter-spacing:1px; color:#fff; text-transform:uppercase;
    display:flex; align-items:center; gap:8px;
}
.sec-head-title i { color:var(--cyan); font-size:11px; }
.sec-head.orange .sec-head-title i { color:var(--orange); }
.sec-head.red    .sec-head-title i { color:var(--red); }
.sec-head.green  .sec-head-title i { color:var(--green); }
.sec-head.pink   .sec-head-title i { color:var(--pink); }
.sec-head.purple .sec-head-title i { color:#a066ff; }
.sec-head-meta { font-size:11px; color:var(--dim); font-family:'Oswald',sans-serif; letter-spacing:0.5px; }

/* ── LAYOUT GRIDS ── */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.three-col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.portal-layout { display:grid; grid-template-columns:1fr 300px; gap:16px; }
.forum-layout  { display:grid; grid-template-columns:1fr 260px; gap:16px; }

/* ════════════════════════════════════════════
   PORTAL PAGE
════════════════════════════════════════════ */

/* Alert ticker */
.zs-alert {
    background:rgba(255,136,0,0.08); border:1px solid rgba(255,136,0,0.2);
    border-left:3px solid var(--orange); padding:8px 14px;
    display:flex; align-items:center; gap:12px; font-size:12px;
}
.zs-alert i { color:var(--orange); flex-shrink:0; }
.zs-alert-text { color:var(--white); flex:1; }
.zs-alert-time { color:var(--dim); font-size:11px; flex-shrink:0; }

/* App grid */
.app-grid {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap:1px; background:var(--border2);
}
.app-tile {
    background:var(--card); padding:14px 12px;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    cursor:pointer; transition:background 0.15s; position:relative;
    text-decoration:none;
}
.app-tile:hover { background:rgba(0,204,255,0.04); }
.app-tile.new::after {
    content:'NEW'; position:absolute; top:6px; right:6px;
    background:var(--green); color:#000; font-size:8px; font-weight:700;
    padding:1px 5px; letter-spacing:0.5px;
}
.app-tile.hot::after {
    content:'HOT'; position:absolute; top:6px; right:6px;
    background:var(--orange); color:#000; font-size:8px; font-weight:700;
    padding:1px 5px; letter-spacing:0.5px;
}
.app-tile.updated::after {
    content:'UPD'; position:absolute; top:6px; right:6px;
    background:var(--orange); color:#000; font-size:8px; font-weight:700;
    padding:1px 5px; letter-spacing:0.5px;
}
.app-icon {
    width:52px; height:52px; border-radius:12px;
    background: var(--card2); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:22px; flex-shrink:0;
}
.app-name { font-size:12px; font-weight:700; color:#fff; text-align:center; line-height:1.2; }
.app-ver  { font-size:10px; color:var(--dim); }
.app-sign-btn {
    width:100%; padding:5px 0;
    background:transparent; border:1px solid var(--border2);
    color:var(--cyan); font-family:'Oswald',sans-serif;
    font-size:11px; font-weight:600; letter-spacing:0.5px;
    text-transform:uppercase; cursor:pointer; transition:all 0.15s;
    text-align:center;
}
.app-sign-btn:hover { background:var(--cyan); color:#000; border-color:var(--cyan); }

/* App filter tabs */
/* ── App Filter Tabs — pill style ── */
.app-filter-tabs {
    display:flex; gap:6px; flex-wrap:nowrap;
    background:transparent;
    padding:10px 16px; justify-content:center;
    border-bottom:1px solid var(--border2);
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
}
.app-filter-tabs::-webkit-scrollbar { display:none; }
.app-tab {
    display:inline-flex; align-items:center; gap:5px;
    padding:5px 11px;
    font-family:'Barlow Condensed',sans-serif;
    font-size:11.5px; font-weight:700; letter-spacing:0.6px;
    text-transform:uppercase; color:var(--grey); cursor:pointer;
    border:1px solid var(--border);
    border-radius:5px;
    background:transparent;
    transition:all 0.15s;
    white-space:nowrap; flex-shrink:0;
    user-select:none;
}
.app-tab i { font-size:10px; }
.app-tab:hover {
    color:var(--white);
    border-color:rgba(255,255,255,0.25);
    background:rgba(255,255,255,0.04);
}
.app-tab.active {
    color:#000;
    background:var(--orange);
    border-color:var(--orange);
    box-shadow:0 0 10px rgba(255,136,0,0.3);
}

/* ── App Library Search Bar ── */
.lib-search-wrap {
    padding:14px 20px;
    background:var(--card2);
    border-bottom:1px solid var(--border2);
    display:flex; align-items:center; gap:10px;
}
.lib-search-inner {
    flex:1;
    display:flex; align-items:center;
    background:#0d0d0f;
    border:1px solid var(--border);
    border-radius:40px;
    padding:0 16px; height:38px; gap:10px;
    transition:border-color 0.2s;
}
.lib-search-inner:focus-within { border-color:rgba(255,136,0,0.5); }
.lib-search-inner i { color:var(--dim); font-size:13px; flex-shrink:0; }
.lib-search-inner input {
    flex:1; background:transparent; border:none; outline:none;
    color:var(--white); font-size:13px; font-family:'Rajdhani',sans-serif;
}
.lib-search-inner input::placeholder { color:var(--dim); }
.lib-filter-btn {
    display:flex; align-items:center; gap:7px;
    padding:0 16px; height:38px;
    background:rgba(255,136,0,0.08);
    border:1px solid rgba(255,136,0,0.3);
    border-radius:6px;
    color:var(--orange);
    font-family:'Barlow Condensed',sans-serif;
    font-size:13px; font-weight:700; letter-spacing:0.5px;
    cursor:pointer; transition:all 0.15s; white-space:nowrap;
}
.lib-filter-btn:hover { background:rgba(255,136,0,0.16); border-color:var(--orange); }
.lib-filter-btn i { font-size:12px; }

/* Sign queue */
.queue-row {
    display:flex; align-items:center; gap:12px;
    padding:10px 14px; border-bottom:1px solid var(--border2);
    font-size:12px;
}
.queue-row:last-child { border-bottom:none; }
.queue-pos { font-family:'Oswald',sans-serif; font-size:18px; font-weight:700; color:var(--dim); width:26px; flex-shrink:0; text-align:center; }
.queue-pos.mine { color:var(--cyan); }
.queue-app { flex:1; }
.queue-app-name { font-weight:700; color:#fff; font-size:13px; }
.queue-app-user { color:var(--dim); font-size:11px; margin-top:1px; }
.queue-status { display:flex; align-items:center; gap:5px; font-size:11px; flex-shrink:0; }
.queue-status .dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.dot-signing  { background:var(--cyan); box-shadow:0 0 5px var(--cyan); animation:pulse 1.5s infinite; }
.dot-queued   { background:var(--dim); }
.dot-done     { background:var(--green); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* Portal sidebar */
.portal-sidebar { display:flex; flex-direction:column; gap:16px; }

/* Recent activity */
.activity-row {
    display:flex; align-items:center; gap:10px;
    padding:8px 12px; border-bottom:1px solid var(--border2);
    font-size:12px;
}
.activity-row:last-child { border-bottom:none; }
.activity-icon { width:26px; height:26px; border-radius:50%; background:var(--card2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }
.activity-icon.sign  { border-color:rgba(0,204,255,0.3); color:var(--cyan); }
.activity-icon.user  { border-color:rgba(0,204,85,0.3); color:var(--green); }
.activity-icon.warn  { border-color:rgba(255,136,0,0.3); color:var(--orange); }
.activity-icon.up    { border-color:rgba(255,136,0,0.3); color:var(--orange); }
.activity-text { flex:1; color:var(--grey); line-height:1.4; }
.activity-text strong { color:var(--white); }
.activity-time { color:var(--dim); font-size:10px; flex-shrink:0; }

/* Online users */
.online-list { display:flex; flex-wrap:wrap; gap:4px; padding:12px; }
.online-tag {
    display:flex; align-items:center; gap:5px;
    padding:3px 8px; background:var(--card2); border:1px solid var(--border);
    font-size:11px; color:var(--grey); border-radius:2px; cursor:default;
    transition:all 0.15s;
}
.online-tag:hover { border-color:var(--cyan); color:var(--cyan); }
.online-dot { width:5px; height:5px; border-radius:50%; background:var(--green); flex-shrink:0; }
.online-dot.away { background:var(--orange); }
.online-dot.busy { background:var(--orange); }

/* Trending apps sidebar */
.trending-row {
    display:flex; align-items:center; gap:10px;
    padding:9px 12px; border-bottom:1px solid var(--border2);
    font-size:12px; cursor:pointer; transition:background 0.15s;
}
.trending-row:last-child { border-bottom:none; }
.trending-row:hover { background:rgba(255,255,255,0.02); }
.trending-rank { font-family:'Oswald',sans-serif; font-size:20px; font-weight:700; color:var(--border); width:22px; flex-shrink:0; text-align:center; }
.trending-row:first-child .trending-rank { color:var(--yellow); }
.trending-row:nth-child(2) .trending-rank { color:var(--grey); }
.trending-row:nth-child(3) .trending-rank { color:var(--orange); }
.trending-icon {
    width:34px; height:34px; border-radius:8px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.trending-icon img { width:22px; height:22px; object-fit:contain; }
.trending-info { flex:1; }
.trending-name { font-weight:700; color:#fff; }
.trending-signs { font-size:11px; color:var(--dim); margin-top:1px; }

/* ════════════════════════════════════════════
   FORUM PAGE
════════════════════════════════════════════ */

/* Pinned / announcement */
.forum-announcement {
    background:rgba(160,102,255,0.06); border:1px solid rgba(160,102,255,0.2);
    border-left:3px solid #a066ff; padding:10px 16px;
    display:flex; align-items:center; gap:12px; font-size:12px;
}
.forum-announcement i { color:#a066ff; flex-shrink:0; }

/* Board sections */
.board-section { border-bottom:1px solid var(--border2); }
.board-section:last-child { border-bottom:none; }
.board-cat-header {
    background:var(--card2); padding:6px 14px;
    display:flex; align-items:center; gap:8px;
    border-bottom:1px solid var(--border2);
}
.board-cat-name {
    font-family:'Oswald',sans-serif; font-size:12px; font-weight:600;
    letter-spacing:1.5px; text-transform:uppercase; color:var(--dim);
}
.board-row {
    display:flex; align-items:center; padding:10px 14px;
    border-bottom:1px solid var(--border2); gap:12px;
    cursor:pointer; transition:background 0.15s;
}
.board-row:last-child { border-bottom:none; }
.board-row:hover { background:rgba(255,255,255,0.015); }
.board-icon {
    width:38px; height:38px; border-radius:4px;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; flex-shrink:0;
}
.board-icon.purple { background:rgba(160,102,255,0.1); color:#a066ff; border:1px solid rgba(160,102,255,0.2); }
.board-icon.cyan   { background:rgba(0,204,255,0.08); color:var(--cyan); border:1px solid rgba(0,204,255,0.15); }
.board-icon.orange { background:rgba(255,136,0,0.08); color:var(--orange); border:1px solid rgba(255,136,0,0.15); }
.board-icon.red    { background:rgba(204,0,0,0.08); color:var(--red); border:1px solid rgba(204,0,0,0.15); }
.board-icon.green  { background:rgba(0,204,85,0.08); color:var(--green); border:1px solid rgba(0,204,85,0.15); }
.board-icon.yellow { background:rgba(255,204,0,0.08); color:var(--yellow); border:1px solid rgba(255,204,0,0.15); }
.board-info { flex:1; min-width:0; }
.board-name { font-family:'Oswald',sans-serif; font-size:14px; font-weight:600; color:#fff; }
.board-desc { font-size:11px; color:var(--dim); margin-top:2px; }
.board-stats { display:flex; gap:18px; flex-shrink:0; text-align:center; }
.board-stat-num { font-family:'Oswald',sans-serif; font-size:16px; font-weight:600; color:var(--grey); line-height:1; }
.board-stat-lbl { font-size:10px; color:var(--dim); letter-spacing:0.5px; text-transform:uppercase; }
.board-last { width:170px; flex-shrink:0; font-size:11px; color:var(--dim); }
.board-last-title { color:var(--grey); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.board-last-user  { color:var(--dim); margin-top:2px; }
.board-new-dot { width:8px; height:8px; border-radius:50%; background:var(--cyan); flex-shrink:0; box-shadow:0 0 4px var(--cyan); }

/* Thread list */
.thread-row {
    display:flex; align-items:center; padding:9px 14px;
    border-bottom:1px solid var(--border2); gap:10px;
    cursor:pointer; transition:background 0.15s;
}
.thread-row:last-child { border-bottom:none; }
.thread-row:hover { background:rgba(255,255,255,0.015); }
.thread-icon {
    width:28px; height:28px; display:flex; align-items:center;
    justify-content:center; font-size:12px; flex-shrink:0; color:var(--dim);
}
.thread-icon.new     { color:var(--cyan); }
.thread-icon.hot     { color:var(--orange); }
.thread-icon.pinned  { color:var(--yellow); }
.thread-icon.locked  { color:var(--dim); }
.thread-info { flex:1; min-width:0; }
.thread-title {
    font-size:13px; font-weight:600; color:var(--white);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.thread-title.read { color:var(--grey); font-weight:400; }
.thread-sub { font-size:11px; color:var(--dim); margin-top:2px; }
.thread-badge {
    font-size:9px; font-weight:700; padding:1px 5px; letter-spacing:0.5px;
    text-transform:uppercase; border-radius:2px; flex-shrink:0; margin-left:6px;
}
.tb-pin  { background:rgba(255,204,0,0.12); color:var(--yellow); border:1px solid rgba(255,204,0,0.25); }
.tb-hot  { background:rgba(255,136,0,0.12); color:var(--orange); border:1px solid rgba(255,136,0,0.25); }
.tb-new  { background:rgba(0,204,255,0.1); color:var(--cyan); border:1px solid rgba(0,204,255,0.2); }
.thread-stats { display:flex; gap:14px; flex-shrink:0; text-align:center; }
.ts-num { font-family:'Oswald',sans-serif; font-size:15px; font-weight:600; color:var(--dim); line-height:1; }
.ts-lbl { font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:0.5px; }
.thread-last { width:140px; flex-shrink:0; font-size:11px; }
.thread-last-user { color:var(--grey); font-weight:600; }
.thread-last-time { color:var(--dim); margin-top:2px; }

/* Forum sidebar */
.forum-sidebar { display:flex; flex-direction:column; gap:16px; }

/* Forum stats sidebar */
.fstat-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:7px 12px; border-bottom:1px solid var(--border2); font-size:12px;
}
.fstat-row:last-child { border-bottom:none; }
.fstat-label { color:var(--dim); }
.fstat-val   { font-weight:700; color:var(--white); }

/* Who's online sidebar */
.whos-online-list { padding:10px 12px; display:flex; flex-direction:column; gap:5px; }
.whos-row { display:flex; align-items:center; gap:7px; font-size:12px; }
.whos-av {
    width:22px; height:22px; border-radius:50%; background:var(--card2);
    border:1px solid var(--border); display:flex; align-items:center;
    justify-content:center; font-size:9px; font-weight:700; color:var(--dim); flex-shrink:0;
}
.whos-name { color:var(--grey); flex:1; }
.whos-where { color:var(--dim); font-size:10px; }

/* ════════════════════════════════════════════
   CREDITS PAGE
════════════════════════════════════════════ */
.credit-row {
    display:flex; align-items:center; gap:12px;
    padding:10px 14px; border-bottom:1px solid var(--border2);
    transition:background 0.15s;
}
.credit-row:last-child { border-bottom:none; }
.credit-row:hover { background:rgba(255,255,255,0.02); }
.cr-av {
    width:38px; height:38px; border-radius:50%;
    border:2px solid var(--border); flex-shrink:0;
    background:#1a1a1e; display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; color:var(--dim); overflow:hidden;
}
.cr-av.cyan   { border-color:var(--cyan); color:var(--cyan); }
.cr-av.orange { border-color:var(--orange); color:var(--orange); }
.cr-av.green  { border-color:var(--green); color:var(--green); }
.cr-av.red    { border-color:var(--red); color:var(--red); }
.cr-info { flex:1; min-width:0; }
.cr-name { font-size:14px; font-weight:700; color:#fff; }
.cr-role { font-size:11px; color:var(--dim); margin-top:1px; }
.cr-badge {
    font-size:10px; font-weight:700; letter-spacing:0.5px;
    padding:2px 8px; border-radius:2px; text-transform:uppercase; flex-shrink:0;
}
.cr-badge.owner    { background:rgba(255,136,0,0.15); color:var(--orange); border:1px solid rgba(255,136,0,0.3); }
.cr-badge.admin    { background:rgba(204,0,0,0.15); color:#ff4444; border:1px solid rgba(204,0,0,0.3); }
.cr-badge.dev      { background:rgba(0,204,255,0.12); color:var(--cyan); border:1px solid rgba(0,204,255,0.25); }
.cr-badge.mod      { background:rgba(0,204,85,0.12); color:var(--green); border:1px solid rgba(0,204,85,0.25); }
.cr-badge.designer { background:rgba(255,51,255,0.12); color:var(--pink); border:1px solid rgba(255,51,255,0.25); }
.cr-badge.encoder  { background:rgba(255,204,0,0.12); color:var(--yellow); border:1px solid rgba(255,204,0,0.25); }

.donor-list { display:flex; flex-wrap:wrap; gap:8px; padding:14px; }
.donor-tag {
    padding:4px 12px; border:1px solid var(--border);
    font-size:12px; color:var(--grey); background:var(--card2);
    border-radius:2px; transition:all 0.15s; cursor:default;
}
.donor-tag:hover { border-color:var(--cyan); color:var(--cyan); }

/* ════════════════════════════════════════════
   UPGRADE PAGE
════════════════════════════════════════════ */
.plans-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; }
.plan-card {
    padding:24px 20px; border-right:1px solid var(--border2);
    display:flex; flex-direction:column; gap:0;
    position:relative; transition:background 0.2s;
}
.plan-card:last-child { border-right:none; }
.plan-card:hover { background:rgba(255,255,255,0.015); }
.plan-card.featured { background:rgba(0,204,255,0.04); }
.plan-featured-badge {
    position:absolute; top:0; right:20px;
    background:var(--cyan); color:#000;
    font-size:9px; font-weight:700; letter-spacing:1px;
    padding:3px 10px; text-transform:uppercase;
}
.plan-name { font-family:'Oswald',sans-serif; font-size:18px; font-weight:700; color:#fff; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
.plan-price { font-family:'Oswald',sans-serif; font-size:36px; font-weight:700; color:var(--orange); line-height:1; margin-bottom:4px; }
.plan-price span { font-size:14px; color:var(--dim); font-weight:400; }
.plan-desc { font-size:12px; color:var(--dim); margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--border2); }
.plan-features { display:flex; flex-direction:column; gap:8px; flex:1; margin-bottom:20px; }
.pf { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--grey); }
.pf i { width:14px; text-align:center; font-size:11px; flex-shrink:0; }
.pf i.yes { color:var(--green); }
.pf i.no  { color:var(--dim); }
.pf.muted { color:var(--dim); }
.plan-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:10px; font-family:'Oswald',sans-serif; font-size:14px; font-weight:600;
    letter-spacing:0.5px; text-transform:uppercase; border-radius:2px; cursor:pointer;
    transition:all 0.2s; border:none; width:100%;
}
.plan-btn.free    { background:transparent; color:var(--dim); border:1px solid var(--border); }
.plan-btn.free:hover { border-color:var(--grey); color:var(--grey); }
.plan-btn.premium { background:var(--cyan); color:#000; }
.plan-btn.premium:hover { background:#00e5ff; }
.plan-btn.vip     { background:var(--orange); color:#000; }
.plan-btn.vip:hover { background:#ff9900; }

.perks-table { width:100%; }
.perks-row { display:flex; border-bottom:1px solid var(--border2); align-items:stretch; }
.perks-row:last-child { border-bottom:none; }
.perks-row.head { background:var(--card2); }
.perks-cell {
    flex:1; padding:9px 14px; border-right:1px solid var(--border2);
    font-size:12px; color:var(--grey); display:flex; align-items:center;
}
.perks-cell:first-child { flex:2; }
.perks-cell:last-child { border-right:none; }
.perks-row.head .perks-cell { font-family:'Oswald',sans-serif; font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--dim); }
.perks-cell i.yes  { color:var(--green); }
.perks-cell i.no   { color:#2a2a2a; }
.perks-cell i.part { color:var(--orange); }

/* ════════════════════════════════════════════
   REGULATIONS PAGE
════════════════════════════════════════════ */
.reg-section { padding:18px 20px; border-bottom:1px solid var(--border2); overflow:hidden; }
.reg-section:last-child { border-bottom:none; }
.reg-num { font-family:'Oswald',sans-serif; font-size:28px; font-weight:700; color:rgba(255,136,0,0.2); float:left; line-height:1; margin-right:14px; margin-top:2px; }
.reg-title { font-family:'Oswald',sans-serif; font-size:15px; font-weight:600; color:#fff; letter-spacing:0.5px; margin-bottom:8px; text-transform:uppercase; }
.reg-body { font-size:13px; color:var(--grey); line-height:1.7; }
.reg-body strong { color:var(--white); }
.reg-body .warn { color:var(--orange); }
.reg-rule { display:flex; gap:10px; margin-top:8px; padding:8px 12px; background:var(--card2); border-left:2px solid var(--orange); font-size:12px; color:var(--grey); }
.reg-rule i { color:var(--orange); flex-shrink:0; margin-top:2px; font-size:11px; }
.punish-cell { padding:10px 14px; border-right:1px solid var(--border2); font-size:12px; color:var(--grey); flex:1; display:flex; align-items:center; }
.punish-cell:last-child { border-right:none; }
.punish-cell.offense { flex:2; color:var(--white); }
.punish-cell.warn2   { color:var(--yellow); }
.punish-cell.ban     { color:var(--orange); }

/* ════════════════════════════════════════════
   FAQ PAGE
════════════════════════════════════════════ */
.faq-item { border-bottom:1px solid var(--border2); overflow:hidden; }
.faq-item:last-child { border-bottom:none; }
.faq-q { padding:14px 16px; display:flex; align-items:center; gap:12px; cursor:pointer; transition:background 0.15s; user-select:none; }
.faq-q:hover { background:rgba(255,51,255,0.03); }
.faq-q-icon { color:var(--pink); font-size:12px; flex-shrink:0; }
.faq-q-text { font-size:14px; font-weight:600; color:#fff; flex:1; }
.faq-q-arrow { color:var(--dim); font-size:11px; transition:transform 0.2s; flex-shrink:0; }
.faq-item.open .faq-q-arrow { transform:rotate(180deg); color:var(--pink); }
.faq-a { display:none; padding:0 16px 16px 42px; font-size:13px; color:var(--grey); line-height:1.7; }
.faq-a strong { color:var(--white); }
.faq-a code { background:var(--card2); border:1px solid var(--border); padding:1px 6px; font-size:11px; color:var(--cyan); font-family:'Courier New',monospace; border-radius:2px; }
.faq-item.open .faq-a { display:block; }

/* ════════════════════════════════════════════
   NEW PORTAL STYLES (matching screenshot)
════════════════════════════════════════════ */

/* News rows */
.news-row {
    display:flex; gap:0; border-bottom:1px solid var(--border2);
    transition:background 0.15s;
}
.news-row:hover { background:rgba(255,255,255,0.015); }
.news-thumb {
    width:80px; flex-shrink:0; background:var(--card2);
    border-right:1px solid var(--border2);
    display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:6px; padding:14px 8px;
    position:relative;
}
.news-badge {
    position:absolute; top:6px; left:6px;
    font-size:8px; font-weight:700; letter-spacing:0.5px;
    padding:2px 5px; text-transform:uppercase;
}
.news-badge.update   { background:var(--orange); color:#000; }
.news-badge.guide    { background:#5588ff; color:#fff; }
.news-badge.new-badge { background:var(--green); color:#000; }
.news-thumb-icon { font-size:28px; color:var(--dim); }
.news-body { flex:1; padding:12px 16px; min-width:0; }
.news-title {
    font-family:'Oswald',sans-serif; font-size:15px; font-weight:600;
    color:#fff; margin-bottom:5px; line-height:1.3;
    cursor:pointer; transition:color 0.15s;
}
.news-title:hover { color:var(--cyan); }
.news-desc { font-size:12px; color:var(--dim); line-height:1.6; margin-bottom:8px; }
.news-meta {
    display:flex; gap:14px; font-size:11px; color:var(--dim); flex-wrap:wrap;
}
.news-meta span { display:flex; align-items:center; gap:4px; }
.news-meta i { font-size:10px; }

/* App grid v2 — card style matching screenshot */
.app-grid2 {
    display:grid; grid-template-columns:1fr 1fr 1fr;
    gap:1px; background:var(--border2);
}
.app-card2 {
    background:var(--card); padding:14px 16px;
    display:grid; grid-template-columns:54px 1fr auto;
    align-items:center; gap:12px;
    cursor:pointer; transition:background 0.15s;
}
.app-card2:hover { background:rgba(0,204,255,0.03); }
.app-card2-icon {
    width:54px; height:54px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; overflow:hidden;
}
.app-card2-icon img { width:32px; height:32px; object-fit:contain; }
.app-card2-info { min-width:0; }
.app-card2-name {
    font-family:'Oswald',sans-serif; font-size:14px; font-weight:600;
    color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.app-card2-bundle { font-size:10px; color:var(--cyan); margin-top:2px; font-family:'Courier New',monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-card2-ver { font-size:10px; color:var(--dim); margin-top:3px; }
.app-card2-dl {
    font-size:11px; color:var(--green); flex-shrink:0;
    display:flex; align-items:center; gap:4px; font-weight:600;
    white-space:nowrap;
}
.app-card2-dl i { font-size:10px; }

/* Staff Pick card */
/* Staff picks — side-by-side cards */
#staff-picks-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    flex-direction: unset !important;
}
.staff-pick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 12px 10px 10px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
    border-right: 1px solid var(--border2);
    text-align: center;
}
.staff-pick-card:last-child { border-right: none; }
.staff-pick-card:hover { background: rgba(255,204,0,0.04); }
.staff-pick-icon {
    width: 52px; height: 52px; border-radius: 12px;
    flex-shrink: 0; overflow: hidden; position: relative;
    border: 1px solid rgba(255,255,255,0.10);
    background: #111;
    margin-bottom: 8px;
}
.staff-pick-icon img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.staff-pick-badge {
    font-size: 7px; font-family: 'Oswald', sans-serif; font-weight: 700;
    letter-spacing: 0.5px; background: rgba(255,204,0,0.15);
    color: var(--yellow); border: 1px solid rgba(255,204,0,0.3);
    padding: 1px 5px; border-radius: 2px; flex-shrink: 0;
    margin-bottom: 6px;
}
.staff-pick-info { width: 100%; min-width: 0; }
.staff-pick-name {
    font-size: 12px; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 3px;
}
.staff-pick-dev {
    font-size: 9px; color: var(--dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 5px;
}
.staff-pick-meta {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 4px; margin-top: 4px;
}
.staff-pick-meta-chip {
    font-size: 8px; font-family: 'JetBrains Mono', monospace;
    color: var(--grey); background: rgba(255,255,255,0.04);
    border: 1px solid var(--border2); border-radius: 2px;
    padding: 1px 5px; white-space: nowrap;
}

/* Forum stats bar */
.fstats-bar {
    display:grid; grid-template-columns:1fr 1fr 1fr 1fr;
    border-top:1px solid var(--border2);
}
.fstats-cell {
    padding:14px 18px; border-right:1px solid var(--border2);
    display:flex; flex-direction:column; gap:4px;
}
.fstats-label {
    font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--dim);
    font-family:'Oswald',sans-serif; font-weight:600;
}
.fstats-val {
    font-family:'Oswald',sans-serif; font-size:26px; font-weight:700; line-height:1;
}
.fstats-val.cyan  { color:var(--cyan); }
.fstats-val.green { color:var(--green); }

/* Latest posts grid */
.lp-grid { display:grid; grid-template-columns:1fr 1fr; }
.lp-col { padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.lp-col:first-child { border-right:1px solid var(--border2); }
.lp-row { display:flex; align-items:flex-start; gap:8px; }
.lp-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.lp-info { flex:1; min-width:0; }
.lp-title {
    font-size:12px; font-weight:600; color:var(--grey);
    display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:color 0.15s;
}
.lp-title:hover { color:var(--cyan); }
.lp-meta { font-size:10px; color:var(--dim); margin-top:2px; display:flex; align-items:center; gap:4px; }
.lp-views { color:var(--dim); }

/* Quick stats sidebar */
.qs-row {
    display:flex; align-items:center; gap:10px;
    padding:9px 14px; border-bottom:1px solid var(--border2);
    font-size:12px;
}
.qs-icon { width:20px; text-align:center; color:var(--dim); font-size:11px; flex-shrink:0; }
.qs-label { flex:1; color:var(--grey); }
.qs-val { font-family:'Oswald',sans-serif; font-size:16px; font-weight:700; flex-shrink:0; }
.qs-val.orange { color:var(--orange); }
.qs-val.green  { color:var(--green); }

/* Top members sidebar */
.tm-row {
    display:flex; align-items:center; gap:8px;
    padding:8px 12px; border-bottom:1px solid var(--border2);
}
.tm-rank {
    font-family:'Oswald',sans-serif; font-size:18px; font-weight:700;
    color:var(--dim); width:18px; flex-shrink:0; text-align:center;
}
.tm-av {
    width:30px; height:30px; border-radius:50%; background:var(--card2);
    border:1px solid var(--border); display:flex; align-items:center;
    justify-content:center; font-size:10px; font-weight:700; flex-shrink:0;
}
.tm-info { flex:1; min-width:0; }
.tm-name { font-size:13px; font-weight:700; color:#fff; }
.tm-posts { font-size:10px; color:var(--dim); }
.tm-rep { font-family:'Oswald',sans-serif; font-size:15px; font-weight:700; flex-shrink:0; }
.tm-rep.green { color:var(--green); }

/* Most reputations sidebar */
.rep-row {
    display:flex; align-items:center; gap:10px;
    padding:10px 14px; border-bottom:1px solid var(--border2);
    font-size:13px;
}
.rep-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.rep-score { font-family:'Oswald',sans-serif; font-size:16px; font-weight:700; color:var(--grey); }

/* ── FOOTER ── */
.zs-footer {
    border-top:1px solid #1c1c1e; margin-top:20px;
    padding:12px 16px; display:flex; justify-content:space-between;
    align-items:center; font-size:11px; color:#444;
}
.zs-footer a { color:#555; transition:color 0.15s; }
.zs-footer a:hover { color:var(--cyan); }

/* ══ FORUM STYLES ══ */
/* ── VIEWS ── */
.view { display:none; }
.view.active { display:block; }

/* ── LAYOUT ── */
.wrap { max-width:1100px; margin:0 auto; padding:20px 16px 40px; }

/* ── BREADCRUMB ── */
.breadcrumb {
  display:flex; align-items:center; gap:7px;
  font-size:12px; color:var(--dim); margin-bottom:14px;
}
.breadcrumb a { color:var(--dim); transition:color 0.15s; }
.breadcrumb a:hover { color:var(--cyan); }
.breadcrumb i { font-size:9px; }

/* ── SEC CARD ── */
.sec-card { background:var(--card); border:1px solid var(--border); overflow:hidden; margin-bottom:16px; }
.sec-head {
  background:linear-gradient(90deg,#1a1a1e,#111113);
  border-left:3px solid var(--purple); padding:7px 12px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.sec-head.orange { border-left-color:var(--orange); }
.sec-head.cyan   { border-left-color:var(--cyan); }
.sec-head.green  { border-left-color:var(--green); }
.sec-head.pink   { border-left-color:var(--pink); }
.sec-head-title {
  font-family:'Oswald',sans-serif; font-size:13px; font-weight:600;
  letter-spacing:1px; color:#fff; text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}
.sec-head-title i { color:var(--purple); font-size:11px; }
.sec-head.orange .sec-head-title i { color:var(--orange); }
.sec-head.cyan   .sec-head-title i { color:var(--cyan); }
.sec-head.green  .sec-head-title i { color:var(--green); }
.sec-head.pink   .sec-head-title i { color:var(--pink); }
.sec-head-meta { font-size:11px; color:var(--dim); font-family:'Oswald',sans-serif; letter-spacing:0.5px; }

/* ═══════════════════════════════════════
   VIEW 1 — FORUM CATEGORY INDEX
═══════════════════════════════════════ */
.forum-layout { display:grid; grid-template-columns:1fr 260px; gap:16px; }

.board-cat-header {
  background:var(--card2); padding:5px 14px;
  display:flex; align-items:center; gap:8px;
  border-bottom:1px solid var(--border2);
}
.board-cat-name {
  font-family:'Oswald',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--dim);
}
.board-row {
  display:flex; align-items:center; padding:11px 14px;
  border-bottom:1px solid var(--border2); gap:12px;
  cursor:pointer; transition:background 0.15s;
}
.board-row:last-child { border-bottom:none; }
.board-row:hover { background:rgba(255,255,255,0.015); }
.board-icon {
  width:40px; height:40px; border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.board-icon.purple { background:rgba(160,102,255,0.1); color:var(--purple); border:1px solid rgba(160,102,255,0.2); }
.board-icon.cyan   { background:rgba(0,204,255,0.08);  color:var(--cyan);   border:1px solid rgba(0,204,255,0.15); }
.board-icon.orange { background:rgba(255,136,0,0.08);  color:var(--orange); border:1px solid rgba(255,136,0,0.15); }
.board-icon.green  { background:rgba(0,204,85,0.08);   color:var(--green);  border:1px solid rgba(0,204,85,0.15); }
.board-icon.yellow { background:rgba(255,204,0,0.08);  color:var(--yellow); border:1px solid rgba(255,204,0,0.15); }
.board-icon.red    { background:rgba(204,0,0,0.08);    color:#ff4444;       border:1px solid rgba(204,0,0,0.15); }
.board-unread { width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 5px var(--cyan); flex-shrink:0; }
.board-read   { width:8px; height:8px; border-radius:50%; background:var(--dim); flex-shrink:0; }
.board-info { flex:1; min-width:0; }
.board-name { font-family:'Oswald',sans-serif; font-size:14px; font-weight:600; color:#fff; }
.board-desc { font-size:11px; color:var(--dim); margin-top:2px; }
.board-stats { display:flex; gap:20px; flex-shrink:0; text-align:center; }
.bs-num { font-family:'Oswald',sans-serif; font-size:16px; font-weight:600; color:var(--grey); line-height:1; }
.bs-lbl { font-size:9px; color:var(--dim); letter-spacing:0.5px; text-transform:uppercase; }
.board-last { width:175px; flex-shrink:0; font-size:11px; color:var(--dim); }
.board-last-title { color:var(--grey); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.board-last-title:hover { color:var(--cyan); }
.board-last-meta { color:var(--dim); margin-top:3px; display:flex; align-items:center; gap:4px; }
.board-last-av {
  width:16px; height:16px; border-radius:50%; background:var(--card2);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:7px; font-weight:700; color:var(--dim); border:1px solid var(--border);
}

/* Forum announcement bar */
.forum-announce {
  background:rgba(160,102,255,0.06); border:1px solid rgba(160,102,255,0.2);
  border-left:3px solid var(--purple); padding:10px 16px;
  display:flex; align-items:center; gap:12px; font-size:12px;
  margin-bottom:16px;
}
.forum-announce i { color:var(--purple); flex-shrink:0; }

/* Stats sidebar */
.fstat-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:7px 12px; border-bottom:1px solid var(--border2); font-size:12px;
}
.fstat-row:last-child { border-bottom:none; }
.fstat-label { color:var(--dim); }
.fstat-val   { font-weight:700; color:var(--white); font-family:'Oswald',sans-serif; font-size:14px; }

/* Who's online sidebar */
.whos-row { display:flex; align-items:center; gap:7px; font-size:12px; padding:6px 12px; border-bottom:1px solid var(--border2); }
.whos-row:last-child { border-bottom:none; }
.whos-av {
  width:24px; height:24px; border-radius:50%; background:var(--card2);
  border:1px solid var(--border); display:flex; align-items:center;
  justify-content:center; font-size:9px; font-weight:700; color:var(--dim); flex-shrink:0;
}
.whos-name { color:var(--grey); flex:1; }
.whos-where { color:var(--dim); font-size:10px; }
.online-dot { width:5px; height:5px; border-radius:50%; background:var(--green); flex-shrink:0; }
.online-dot.away { background:var(--orange); }

/* ═══════════════════════════════════════
   VIEW 2 — THREAD LIST
═══════════════════════════════════════ */
.thread-layout { display:grid; grid-template-columns:1fr 240px; gap:16px; }
.thread-controls {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px; background:var(--card2); border-bottom:1px solid var(--border2);
}
.thread-controls-left { display:flex; gap:6px; }
.tc-btn {
  padding:4px 12px; background:transparent; border:1px solid var(--border);
  color:var(--grey); font-family:'Oswald',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:0.5px; text-transform:uppercase; cursor:pointer; transition:all 0.15s;
}
.tc-btn:hover { border-color:var(--cyan); color:var(--cyan); }
.tc-btn.primary { background:var(--orange); border-color:var(--orange); color:#000; }
.tc-btn.primary:hover { background:#ff9900; }
.thread-row {
  display:flex; align-items:center; padding:9px 14px;
  border-bottom:1px solid var(--border2); gap:10px;
  cursor:pointer; transition:background 0.15s;
}
.thread-row:last-child { border-bottom:none; }
.thread-row:hover { background:rgba(255,255,255,0.015); }
.t-type {
  width:28px; height:28px; display:flex; align-items:center;
  justify-content:center; font-size:12px; flex-shrink:0;
}
.t-type.new     { color:var(--cyan); }
.t-type.hot     { color:var(--orange); }
.t-type.pinned  { color:var(--yellow); }
.t-type.locked  { color:var(--dim); }
.t-type.normal  { color:var(--dim); }
.t-info { flex:1; min-width:0; }
.t-title {
  font-size:13px; font-weight:600; color:var(--white);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.t-title.read { color:var(--grey); font-weight:400; }
.t-sub { font-size:11px; color:var(--dim); margin-top:2px; display:flex; align-items:center; gap:6px; }
.t-badge {
  font-size:8px; font-weight:700; padding:1px 5px; letter-spacing:0.5px;
  text-transform:uppercase; border-radius:2px; flex-shrink:0;
}
.tb-pin  { background:rgba(255,204,0,0.12); color:var(--yellow); border:1px solid rgba(255,204,0,0.25); }
.tb-hot  { background:rgba(255,136,0,0.12); color:var(--orange); border:1px solid rgba(255,136,0,0.25); }
.tb-new  { background:rgba(0,204,255,0.10); color:var(--cyan);   border:1px solid rgba(0,204,255,0.20); }
.tb-lock { background:rgba(80,80,80,0.2);   color:var(--dim);    border:1px solid rgba(80,80,80,0.3); }
.t-stats { display:flex; gap:16px; flex-shrink:0; text-align:center; }
.ts-num { font-family:'Oswald',sans-serif; font-size:15px; font-weight:600; color:var(--dim); line-height:1; }
.ts-lbl { font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:0.5px; }
.t-last { width:145px; flex-shrink:0; font-size:11px; }
.t-last-user { color:var(--grey); font-weight:600; display:flex; align-items:center; gap:5px; }
.t-last-time { color:var(--dim); margin-top:2px; }
.t-av {
  width:18px; height:18px; border-radius:50%; background:var(--card2);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:7px; font-weight:700; flex-shrink:0; border:1px solid var(--border);
}
/* Pagination */
.pagination {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-top:1px solid var(--border2);
}
.pg-info { font-size:11px; color:var(--dim); }
.pg-pages { display:flex; gap:3px; }
.pg-btn {
  width:26px; height:26px; background:var(--card2); border:1px solid var(--border);
  color:var(--grey); font-family:'Oswald',sans-serif; font-size:11px; font-weight:600;
  cursor:pointer; transition:all 0.15s; display:flex; align-items:center; justify-content:center;
}
.pg-btn:hover { border-color:var(--cyan); color:var(--cyan); }
.pg-btn.active { background:var(--orange); border-color:var(--orange); color:#000; }

/* ═══════════════════════════════════════
   VIEW 3 — THREAD / POST VIEW
═══════════════════════════════════════ */
.post-layout { display:flex; flex-direction:column; gap:0; }

/* Post row — full width, poster card on LEFT */
.post-row {
  display:flex;
  border-bottom:1px solid var(--border2);
  min-height:180px;
}
.post-row:last-child { border-bottom:none; }
.post-row.highlight { background:rgba(255,136,0,0.02); }

/* ── POSTER CARD (left column) ── */
/* ══ POSTBIT CARD ══════════════════════════════════════ */
.poster-card {
  width: 188px;
  flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--border2);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Rank corner triangle */
.pb-rank-corner {
  position: absolute; top: 0; left: 0;
  width: 0; height: 0; border-style: solid;
  border-width: 40px 40px 0 0; z-index: 10; pointer-events: none;
}
.pb-rank-icon {
  position: absolute; top: -37px; left: 3px;
  font-size: 13px; filter: drop-shadow(0 0 4px currentColor);
}
/* Group color bar */
.pb-group-bar { height: 3px; width: 100%; flex-shrink: 0; }
/* Avatar section */
.pb-avatar-wrap {
  background: linear-gradient(180deg,#0a0a0c,#111113);
  border-bottom: 1px solid var(--border2);
  padding: 18px 0 0;
  display: flex; flex-direction: column; align-items: center;
}
.pb-avatar {
  width: 80px; height: 80px; border-radius: 6px;
  overflow: hidden; position: relative; border: 2px solid;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Oswald', sans-serif; font-size: 28px; font-weight: 700;
}
.pb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pb-online-dot {
  position: absolute; bottom: 4px; right: 4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green); border: 2px solid var(--card2);
  box-shadow: 0 0 5px var(--green);
}
.pb-online-dot.away { background: var(--yellow); box-shadow: 0 0 5px var(--yellow); }
.pb-online-dot.offline { background: var(--dim); box-shadow: none; }
.pb-username {
  font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  margin-top: 9px; text-align: center; cursor: pointer;
}
.pb-username:hover { opacity: 0.8; }
.pb-usertitle {
  font-size: 9px; font-weight: 600; color: var(--dim);
  text-align: center; padding: 1px 8px 3px; font-style: italic;
}
.pb-group-badge {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 4px 10px; margin: 5px 10px 10px;
  border: 1px solid; font-family: 'Oswald', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; width: calc(100% - 20px);
}
/* Rep / Likes row */
.pb-rep-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border2);
  border-top: 1px solid var(--border2);
}
.pb-rep-cell { background: var(--card2); padding: 7px 5px; text-align: center; }
.pb-rep-val {
  font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 700;
  line-height: 1; display: block;
}
.pb-rep-lbl {
  font-size: 8px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--dim); margin-top: 1px; display: block;
}
/* Vouches */
.pb-vouches {
  padding: 4px 10px; display: flex; align-items: center;
  justify-content: space-between; border-top: 1px solid var(--border2);
}
.pb-vouches-label {
  display: flex; align-items: center; gap: 5px;
  font-family: 'Oswald', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--dim);
}
.pb-vouches-val {
  font-family: 'Oswald', sans-serif; font-size: 12px;
  font-weight: 700; color: var(--green);
}
/* Stat rows */
.pb-stats { border-top: 1px solid var(--border2); }
.pb-stat-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 10px; border-bottom: 1px solid var(--border2); font-size: 11px;
}
.pb-stat-row:last-child { border-bottom: none; }
.pb-stat-key {
  display: flex; align-items: center; gap: 6px; color: var(--dim);
  font-family: 'Oswald', sans-serif; font-size: 9px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
}
.pb-stat-key i { width: 11px; text-align: center; }
.pb-stat-val {
  font-family: 'Oswald', sans-serif; font-size: 11px;
  font-weight: 700; color: var(--white);
}
/* Sign quota */
.pb-quota { border-top: 1px solid var(--border2); padding: 6px 10px; }
.pb-quota-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;
}
.pb-quota-label {
  font-family: 'Oswald', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--dim);
  display: flex; align-items: center; gap: 4px;
}
.pb-quota-count { font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 700; }
.pb-quota-track { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.pb-quota-fill { height: 100%; border-radius: 2px; }
/* Badges */
.pb-badges { border-top: 1px solid var(--border2); padding: 6px 8px; }
.pb-badges-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 3px; }
.pb-badge {
  aspect-ratio: 1; border-radius: 4px; display: flex;
  align-items: center; justify-content: center;
  font-size: 11px; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.15s; position: relative;
}
.pb-badge:hover { transform: scale(1.2); z-index: 5; }
.pb-badge.locked {
  background: rgba(255,255,255,0.02); border-color: var(--border2);
  color: var(--dim); font-size: 9px;
}
.pb-badge[data-tip]:hover::after {
  content: attr(data-tip); position: absolute;
  bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%);
  background: #000; border: 1px solid var(--border); color: var(--white);
  font-family: 'Rajdhani', sans-serif; font-size: 10px; font-weight: 600;
  white-space: nowrap; padding: 2px 6px; border-radius: 2px;
  pointer-events: none; z-index: 99;
}
/* Milestone */
.pb-milestone {
  border-top: 1px solid var(--border2); padding: 5px 10px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'Oswald', sans-serif; font-size: 8px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
}
/* Action buttons */
.pb-actions {
  border-top: 1px solid var(--border2);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border2); margin-top: auto;
}
.pb-action-btn {
  background: var(--card2); border: none; color: var(--dim);
  padding: 5px 4px; font-family: 'Oswald', sans-serif; font-size: 9px;
  font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.pb-action-btn:hover { background: var(--card); color: var(--white); }
.pb-action-btn.rep:hover { color: var(--green); }
.pb-action-btn.vouch:hover { color: var(--cyan); }
.pb-action-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── POST ROW overrides (keep existing .post-row layout) ── */
.post-row { display: flex; }

/* ── POST BODY (right column) ── */
.post-body { padding:0; display:flex; flex-direction:column; flex:1; min-width:0; }
.post-meta-bar {
  display:flex; align-items:center; gap:10px;
  padding:8px 16px; background:rgba(255,255,255,0.02);
  border-bottom:1px solid var(--border2);
}
.post-num { font-family:'Oswald',sans-serif; font-size:11px; color:var(--dim); letter-spacing:0.5px; }
.post-time { font-size:11px; color:var(--dim); margin-left:auto; }
.post-time i { margin-right:3px; font-size:9px; }
.post-permalink { font-size:10px; color:var(--dim); transition:color 0.15s; }
.post-permalink:hover { color:var(--cyan); }

/* Post content */
.post-content {
  padding:18px 20px; font-size:14px; color:var(--grey);
  line-height:1.85; flex:1;
}
.post-content p { margin-bottom:14px; }
.post-content p:last-child { margin-bottom:0; }
.post-content strong { color:var(--white); }
.post-content a { color:var(--cyan); }
.post-content code {
  background:var(--card2); border:1px solid var(--border);
  padding:1px 6px; font-size:11px; color:var(--cyan);
  font-family:'Courier New',monospace; border-radius:2px;
}
.post-content .quote-block {
  background:rgba(255,255,255,0.03); border-left:3px solid var(--border);
  padding:10px 14px; margin:12px 0; font-size:13px; border-radius:0 3px 3px 0;
}
.post-content .quote-header {
  font-family:'Oswald',sans-serif; font-size:11px; color:var(--dim);
  margin-bottom:6px; display:flex; align-items:center; gap:5px;
}
.post-content .quote-header i { font-size:10px; }
.post-content .info-box {
  background:rgba(0,204,255,0.05); border-left:3px solid var(--cyan);
  padding:10px 14px; margin:12px 0; font-size:13px;
}
.post-content .warn-box {
  background:rgba(255,136,0,0.05); border-left:3px solid var(--orange);
  padding:10px 14px; margin:12px 0; font-size:13px; color:var(--white);
}
.post-content ul, .post-content ol { padding-left:20px; margin:10px 0; display:flex; flex-direction:column; gap:5px; }

/* Post action bar */
.post-actions {
  padding:8px 16px; border-top:1px solid var(--border2);
  display:flex; align-items:center; gap:10px;
  background:rgba(0,0,0,0.15);
}
.post-action-btn {
  display:flex; align-items:center; gap:4px;
  font-size:11px; color:var(--dim); cursor:pointer;
  transition:color 0.15s; padding:4px 8px;
  border:1px solid transparent;
}
.post-action-btn:hover { color:var(--cyan); border-color:rgba(0,204,255,0.2); }
.post-action-btn.liked { color:var(--green); }
.post-action-btn.quoted { color:var(--yellow); }
.post-action-ml { margin-left:auto; }

/* Thread header card */
.thread-header-card {
  background:var(--card); border:1px solid var(--border);
  border-left:4px solid var(--purple);
  padding:18px 24px; margin-bottom:16px;
  display:flex; align-items:flex-start; gap:16px;
}
.thc-icon {
  width:44px; height:44px; border-radius:8px;
  background:rgba(160,102,255,0.1); border:1px solid rgba(160,102,255,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--purple); flex-shrink:0;
}
.thc-info { flex:1; }
.thc-title {
  font-family:'Oswald',sans-serif; font-size:20px; font-weight:700;
  color:#fff; letter-spacing:0.5px; margin-bottom:5px;
}
.thc-meta { display:flex; align-items:center; gap:14px; font-size:12px; color:var(--dim); flex-wrap:wrap; }
.thc-meta span { display:flex; align-items:center; gap:4px; }
.thc-meta i { font-size:10px; }

/* Reply box */
.reply-box {
  background:var(--card); border:1px solid var(--border); padding:16px;
  margin-top:16px;
}
.reply-box-head {
  font-family:'Oswald',sans-serif; font-size:13px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; color:#fff;
  margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.reply-box-head i { color:var(--orange); }
.reply-toolbar {
  display:flex; gap:6px; padding:7px 10px; background:var(--card2);
  border:1px solid var(--border); border-bottom:none;
}
.rt-btn {
  width:26px; height:26px; background:transparent; border:1px solid var(--border);
  color:var(--dim); font-size:11px; cursor:pointer; transition:all 0.15s;
  display:flex; align-items:center; justify-content:center;
}
.rt-btn:hover { border-color:var(--cyan); color:var(--cyan); }
.reply-textarea {
  width:100%; min-height:100px; background:#0a0a0a;
  border:1px solid var(--border); color:#fff;
  padding:10px 14px; font-size:13px; font-family:'Rajdhani',sans-serif;
  outline:none; resize:vertical;
}
.reply-submit-row {
  display:flex; justify-content:space-between; align-items:center; margin-top:10px;
}
.reply-opts { display:flex; align-items:center; gap:14px; font-size:12px; color:var(--dim); }
.reply-check { display:flex; align-items:center; gap:5px; cursor:pointer; transition:color 0.15s; }
.reply-check:hover { color:var(--grey); }
.submit-btn {
  background:var(--orange); border:none; color:#000;
  padding:8px 28px; font-family:'Oswald',sans-serif;
  font-size:14px; font-weight:700; letter-spacing:0.5px;
  cursor:pointer; display:flex; align-items:center; gap:8px;
  transition:background 0.15s;
}
.submit-btn:hover { background:#ff9900; }

/* ═══════════════════════════════════════
   VIEW 4 — USER PROFILE
═══════════════════════════════════════ */
.profile-layout { display:grid; grid-template-columns:270px 1fr; gap:16px; }

/* Profile card */
.profile-card {
  background:var(--card); border:1px solid var(--border); overflow:hidden;
}
.profile-banner {
  height:72px; position:relative; overflow:hidden;
}
.profile-banner-bg {
  position:absolute; inset:0; opacity:0.6;
}
.profile-banner-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 0%, var(--card) 100%);
}
.profile-av-wrap {
  position:relative; margin:-38px 0 0 16px; width:76px;
}
.profile-av {
  width:76px; height:76px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; font-size:28px; font-weight:700;
  border:4px solid var(--card);
}
.profile-av-online {
  position:absolute; bottom:4px; right:4px;
  width:16px; height:16px; border-radius:50%;
  background:var(--green); border:2px solid var(--card);
}
.profile-main-info { padding:12px 16px 0; }
.profile-name {
  font-family:'Oswald',sans-serif; font-size:20px; font-weight:700;
  margin-bottom:4px;
}
.profile-role-badge {
  display:inline-block; font-size:9px; font-weight:700;
  padding:2px 8px; border-radius:2px; text-transform:uppercase;
  letter-spacing:0.5px; margin-bottom:10px;
}
.profile-bio {
  font-size:12px; color:var(--grey); line-height:1.6;
  margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--border2);
}
.profile-stats-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  border-bottom:1px solid var(--border2);
}
.psg-cell {
  padding:10px 8px; text-align:center; border-right:1px solid var(--border2);
}
.psg-cell:last-child { border-right:none; }
.psg-num {
  font-family:'Oswald',sans-serif; font-size:20px; font-weight:700;
  line-height:1;
}
.psg-lbl { font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }
.profile-info-list { padding:10px 14px; display:flex; flex-direction:column; gap:5px; }
.pil-row { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--grey); }
.pil-row i { width:14px; text-align:center; font-size:11px; color:var(--dim); flex-shrink:0; }
.pil-row span { color:var(--white); }
.profile-rep-section { padding:10px 14px; border-top:1px solid var(--border2); }
.rep-label-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; font-size:11px; }
.rep-track { height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.rep-fill { height:100%; border-radius:3px; }
.profile-actions { padding:12px 14px; border-top:1px solid var(--border2); display:flex; flex-direction:column; gap:6px; }
.prof-btn {
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:8px; font-family:'Oswald',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:0.5px; text-transform:uppercase; cursor:pointer; transition:all 0.15s;
  border:1px solid var(--border); color:var(--grey); background:transparent;
}
.prof-btn:hover { border-color:var(--cyan); color:var(--cyan); }
.prof-btn.primary { background:var(--orange); border-color:var(--orange); color:#000; }
.prof-btn.primary:hover { background:#ff9900; }
.profile-signature {
  padding:10px 14px; border-top:1px solid var(--border2);
  font-size:11px; color:var(--dim); font-style:italic; line-height:1.6;
}

/* Profile tabs */
.profile-tab-bar { display:flex; background:var(--card2); border:1px solid var(--border); margin-bottom:16px; }
.prof-tab {
  flex:1; padding:10px; text-align:center;
  font-family:'Oswald',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:0.5px; text-transform:uppercase; color:var(--dim);
  cursor:pointer; border-right:1px solid var(--border); transition:all 0.15s;
  border-bottom:2px solid transparent;
}
.prof-tab:last-child { border-right:none; }
.prof-tab:hover { color:var(--grey); }
.prof-tab.active { color:var(--purple); border-bottom-color:var(--purple); background:rgba(160,102,255,0.04); }

/* Recent posts in profile */
.rp-row {
  display:flex; gap:12px; padding:12px 14px;
  border-bottom:1px solid var(--border2); cursor:pointer;
  transition:background 0.15s;
}
.rp-row:last-child { border-bottom:none; }
.rp-row:hover { background:rgba(255,255,255,0.015); }
.rp-board-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.rp-content { flex:1; min-width:0; }
.rp-thread { font-size:13px; font-weight:600; color:var(--white); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-excerpt { font-size:11px; color:var(--dim); line-height:1.5; margin-bottom:4px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.rp-meta { font-size:10px; color:var(--dim); display:flex; gap:10px; }

/* Awards section */
.awards-grid { display:flex; flex-wrap:wrap; gap:8px; padding:14px; }
.award-badge {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 14px; background:var(--card2); border:1px solid var(--border);
  border-radius:3px; cursor:default; transition:all 0.15s; min-width:80px;
}
.award-badge:hover { border-color:var(--purple); }
.award-icon { font-size:22px; }
.award-name { font-size:9px; color:var(--dim); text-align:center; text-transform:uppercase; letter-spacing:0.5px; }

/* Nav tabs for views */
.demo-nav {
  background:var(--mid); border-bottom:1px solid var(--border);
  display:flex; gap:0; padding:0 16px; max-width:1100px; margin:0 auto;
}
.demo-tab {
  padding:9px 18px; font-family:'Oswald',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:0.5px; text-transform:uppercase; color:var(--dim);
  cursor:pointer; border-bottom:2px solid transparent; transition:all 0.15s;
}
.demo-tab:hover { color:var(--grey); }
.demo-tab.active { color:var(--purple); border-bottom-color:var(--purple); }

/* ══ FORUM/DYLIB VISIBILITY ══ */
.forum-view { display:none; }
.forum-view.active { display:block; }

/* ── POSTER CARD ACTIONS ── */
.pc-actions { width:100%; display:flex; flex-direction:column; gap:4px; margin-top:8px; padding-top:8px; border-top:1px solid var(--border2); }
.pc-act-btn { display:flex; align-items:center; justify-content:center; gap:5px; padding:4px 6px; font-family:'Oswald',sans-serif; font-size:10px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; cursor:pointer; transition:all 0.15s; border:1px solid var(--border); color:var(--dim); background:transparent; width:100%; }
.pc-act-btn:hover { border-color:var(--cyan); color:var(--cyan); }
.pc-act-btn.pm { background:rgba(255,136,0,0.08); border-color:rgba(255,136,0,0.3); color:var(--orange); }
.pc-act-btn.pm:hover { background:rgba(255,136,0,0.15); border-color:var(--orange); }
.pc-act-btn-row { display:flex; gap:4px; }
.pc-act-btn-row .pc-act-btn { flex:1; }

/* ── DYLIB THREAD STYLING ── */
.tb-dylib { background:rgba(160,102,255,0.12); color:var(--purple); border:1px solid rgba(160,102,255,0.3); }
.thread-row.dylib { border-left:2px solid rgba(160,102,255,0.4); background:rgba(160,102,255,0.015); cursor:pointer; }
.thread-row.dylib:hover { background:rgba(160,102,255,0.04); }
.t-type.dylib { color:var(--purple); }

/* ── DYLIB POST VIEWS ── */
.dylib-hero { background:var(--card); border:1px solid rgba(160,102,255,0.3); border-left:4px solid var(--purple); position:relative; overflow:hidden; margin-bottom:16px; }
.dylib-hero-bg { position:absolute; inset:0; background:radial-gradient(ellipse at 20% 50%,rgba(160,102,255,0.08) 0%,transparent 70%); pointer-events:none; }
.dylib-hero-content { position:relative; display:flex; align-items:center; justify-content:space-between; padding:20px 24px; gap:16px; }
.dylib-hero-left { display:flex; align-items:center; gap:16px; flex:1; min-width:0; }
.dylib-hero-icon { width:64px; height:64px; border-radius:12px; flex-shrink:0; background:rgba(160,102,255,0.12); border:2px solid rgba(160,102,255,0.4); display:flex; align-items:center; justify-content:center; font-size:26px; color:var(--purple); }
.dylib-hero-name { font-family:'Oswald',sans-serif; font-size:24px; font-weight:700; color:#fff; letter-spacing:1px; line-height:1; white-space:nowrap; }
.dylib-hero-ver { font-size:11px; color:var(--dim); margin:4px 0 8px; }
.dylib-hero-tags { display:flex; flex-wrap:wrap; gap:5px; }
.dylib-tag { font-size:9px; font-weight:600; padding:2px 7px; border-radius:2px; font-family:'Oswald',sans-serif; letter-spacing:0.5px; text-transform:uppercase; display:flex; align-items:center; gap:3px; }
.dylib-tag.purple { background:rgba(160,102,255,0.12); color:var(--purple); border:1px solid rgba(160,102,255,0.3); }
.dylib-tag.green  { background:rgba(0,204,85,0.10); color:var(--green); border:1px solid rgba(0,204,85,0.25); }
.dylib-tag.cyan   { background:rgba(0,204,255,0.08); color:var(--cyan); border:1px solid rgba(0,204,255,0.2); }
.dylib-tag.orange { background:rgba(255,136,0,0.10); color:var(--orange); border:1px solid rgba(255,136,0,0.25); }
.dylib-hero-right { display:flex; align-items:center; gap:20px; flex-shrink:0; }
.dylib-hero-stat { text-align:center; }
.dylib-hero-stat span { font-family:'Oswald',sans-serif; font-size:18px; font-weight:700; color:#fff; display:block; line-height:1; }
.dylib-hero-stat small { font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:1px; margin-top:2px; display:block; }
.dylib-dl-btn { background:var(--purple); border:none; color:#fff; padding:9px 18px; font-family:'Oswald',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.5px; cursor:pointer; display:flex; align-items:center; gap:7px; white-space:nowrap; }

/* Tab bar */
.dylib-tabbar { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:14px; overflow-x:auto; }
.dylib-tab { background:transparent; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; color:var(--dim); padding:9px 16px; font-family:'Oswald',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; cursor:pointer; transition:all 0.15s; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.dylib-tab:hover { color:#fff; }
.dylib-tab.active { color:var(--purple); border-bottom-color:var(--purple); }
.dylib-tab.active.orange-tab { color:var(--orange); border-bottom-color:var(--orange); }
.dylib-tab-count { background:rgba(160,102,255,0.3); color:var(--purple); font-size:9px; padding:1px 5px; border-radius:10px; font-weight:700; }

/* Dylib content area */
.dylib-page-content { min-height:200px; }

/* Two-col layout inside dylib pages */
.dylib-layout { display:grid; grid-template-columns:1fr 240px; gap:16px; }
.dylib-layout > * { min-width:0; }

/* Hook map */
.hook-row { display:grid; grid-template-columns:150px 1fr 90px 80px; padding:9px 14px; border-bottom:1px solid var(--border2); font-size:11px; align-items:center; }
.hook-row:last-child { border-bottom:none; }
.hook-addr { color:var(--purple); font-family:'Courier New',monospace; font-size:10px; }
.hook-sym  { color:var(--grey); font-family:'Courier New',monospace; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hook-type { font-size:8px; font-weight:700; padding:2px 5px; text-transform:uppercase; letter-spacing:0.5px; }
.type-ret  { background:rgba(160,102,255,0.1); color:var(--purple); border:1px solid rgba(160,102,255,0.3); }
.type-hook { background:rgba(0,204,255,0.08); color:var(--cyan); border:1px solid rgba(0,204,255,0.2); }
.hook-ok   { color:var(--green); font-size:10px; font-family:'Oswald',sans-serif; }

/* Code block */
.dylib-code { background:#060608; border-left:3px solid var(--purple); padding:16px 18px; font-family:'Courier New',monospace; font-size:12px; line-height:1.8; color:#ccc; overflow-x:auto; white-space:pre; margin:0; }
.dc-comment { color:#4a5568; font-style:italic; }
.dc-kw { color:var(--purple); font-weight:700; }
.dc-type { color:var(--cyan); }
.dc-str { color:var(--green); }
.dc-val { color:var(--orange); }

/* Compat grid */
.compat-cell { padding:8px 10px; background:var(--card); font-size:11px; color:var(--grey); display:flex; align-items:center; justify-content:center; }
.compat-cell.head { background:var(--card2); font-family:'Oswald',sans-serif; font-size:10px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--dim); }
.compat-cell.ok { color:var(--green); }
.compat-cell.warn { color:var(--yellow); }
.compat-cell.fail { color:#ff4444; }

/* Supported apps grid */
.nosub-app-tile { background:var(--card); padding:14px 10px; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; }
.nosub-app-tile:hover { background:rgba(255,136,0,0.04); }
.nosub-app-tile span:first-of-type { font-size:11px; font-weight:700; color:#fff; }
.nosub-ok { font-size:9px; color:var(--green); font-family:'Oswald',sans-serif; }

/* Comment rows in dylib replies */
.cm-role.dev { background:rgba(0,204,255,0.12); color:var(--cyan); border:1px solid rgba(0,204,255,0.25); border-radius:2px; font-size:8px; padding:1px 5px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
.cm-role.vip { background:rgba(255,51,255,0.1); color:var(--pink); border:1px solid rgba(255,51,255,0.25); border-radius:2px; font-size:8px; padding:1px 5px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
.warn-box { background:rgba(255,136,0,0.06); border-left:3px solid var(--orange); padding:10px 14px; margin-top:12px; font-size:12px; color:var(--grey); }
#v-profile { }

/* ═══════════════════════════════════════
   PROFILE PAGE STYLES (embedded)
═══════════════════════════════════════ */

/* ═══════════════════════════════════════
   ROOT VARIABLES
═══════════════════════════════════════ */
/* profile :root skipped */

#v-profile *,
#v-profile *::before,
#v-profile *::after { margin:0; padding:0; box-sizing:border-box; }

#v-profile body {
  background: var(--bg);
  font-family: 'Barlow', sans-serif;
  color: var(--white);
  font-size: 14px;
  min-height: 100vh;
}

#v-profile a { text-decoration:none; color:var(--cyan); }
#v-profile a:hover { opacity:0.8; }
#v-profile code { font-family:'JetBrains Mono',monospace; }

/* ═══════════════════════════════════════
   TOPBAR
═══════════════════════════════════════ */
#v-profile .topbar {
  height: 48px;
  background: rgba(13,16,20,0.95);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

#v-profile .topbar-logo {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #fff;
  text-transform: uppercase;
  margin-right: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#v-profile .topbar-logo span { color: var(--orange); }

#v-profile .topbar-nav { display:flex; gap:2px; flex:1; }
#v-profile .topbar-nav a {
  color: var(--grey);
  font-family: 'Barlow Condensed',sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 3px;
  transition: all 0.15s;
}
#v-profile .topbar-nav a:hover,
#v-profile .topbar-nav a.active { color:#fff; background:rgba(255,255,255,0.06); }

#v-profile .topbar-right { display:flex; align-items:center; gap:12px; }
#v-profile .topbar-notif {
  position:relative;
  width:32px; height:32px;
  border-radius:6px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--grey);
  transition:all 0.15s;
}
#v-profile .topbar-notif:hover { border-color:var(--orange); color:var(--orange); }
#v-profile .topbar-notif .badge {
  position:absolute; top:-5px; right:-5px;
  background:var(--orange);
  color:#000; font-size:9px; font-weight:800;
  width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed',sans-serif;
}
#v-profile .topbar-user {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  padding:4px 10px 4px 5px;
  border-radius:6px;
  cursor:pointer; transition:all 0.15s;
}
#v-profile .topbar-user:hover { border-color:var(--orange); }
#v-profile .topbar-user-av {
  width:26px; height:26px; border-radius:4px;
  background:linear-gradient(135deg,var(--orange),#cc5500);
  display:flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:800; color:#000;
}
#v-profile .topbar-user-name {
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px; font-weight:700; color:#fff; letter-spacing:0.5px;
}

/* ═══════════════════════════════════════
   PAGE SHELL
═══════════════════════════════════════ */
#v-profile .page { max-width: 1200px; margin: 0 auto; padding: 0 20px 60px; }

/* ═══════════════════════════════════════
   PROFILE BANNER
═══════════════════════════════════════ */
#v-profile .profile-banner-wrap {
  position: relative;
  height: 260px;
  overflow: hidden;
  margin: 0 -20px;
}

#v-profile .profile-banner-img {
  position: absolute;
  inset: 0;
  background: var(--profile-bg);
  background-size: cover;
  background-position: center;
}

/* particle/grid overlay */
#v-profile .profile-banner-img::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(255,122,0,0.03) 40px, rgba(255,122,0,0.03) 41px),
    repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(0,212,255,0.03) 40px, rgba(0,212,255,0.03) 41px);
}

#v-profile .profile-banner-img::after {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255,122,0,0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(157,92,255,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(0,232,122,0.06) 0%, transparent 50%);
}

#v-profile .profile-banner-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
}

/* Scanline effect */
#v-profile .profile-banner-scan {
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px
  );
}

/* Background controls */
#v-profile .banner-edit-btn {
  position: absolute; top:14px; right:14px;
  display:flex; align-items:center; gap:6px;
  background:rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.15);
  color:var(--grey);
  padding:6px 14px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer; transition:all 0.15s;
  backdrop-filter:blur(8px);
  border-radius:3px;
}
#v-profile .banner-edit-btn:hover { border-color:var(--orange); color:var(--orange); }

/* BG Color Picker Panel */
#v-profile .bg-picker-panel {
  display: none;
  position: absolute; top:52px; right:14px;
  background: var(--card);
  border:1px solid var(--border);
  padding:14px;
  z-index:50;
  width:240px;
  border-radius:4px;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
}
#v-profile .bg-picker-panel.open { display:block; }
#v-profile .bg-picker-panel h4 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--grey);
  margin-bottom:10px;
}
#v-profile .bg-preset-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:12px;
}
#v-profile .bg-preset {
  aspect-ratio:1; border-radius:4px; cursor:pointer;
  border:2px solid transparent; transition:all 0.15s;
}
#v-profile .bg-preset:hover,
#v-profile .bg-preset.active { border-color:#fff; transform:scale(1.08); }
#v-profile .bg-url-input {
  width:100%; background:#060a0d; border:1px solid var(--border);
  color:#fff; padding:6px 10px; font-size:11px;
  font-family:'Barlow',sans-serif; outline:none; border-radius:2px;
  margin-bottom:8px;
}
#v-profile .bg-url-input::placeholder { color:var(--dim); }
#v-profile .bg-apply-btn {
  width:100%; background:var(--orange); border:none; color:#000;
  padding:6px; font-family:'Barlow Condensed',sans-serif;
  font-size:12px; font-weight:800; letter-spacing:1px; cursor:pointer;
  text-transform:uppercase; border-radius:2px; transition:all 0.15s;
}
#v-profile .bg-apply-btn:hover { background:var(--orange2); }

/* ═══════════════════════════════════════
   PROFILE HEADER
═══════════════════════════════════════ */
#v-profile .profile-header {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin-top: -70px;
  position: relative;
  z-index: 10;
  padding: 0 0 24px;
}

#v-profile .profile-avatar-wrap {
  position: relative; flex-shrink:0;
}
#v-profile .profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1a0e00, #2a1800);
  border: 3px solid var(--user-color);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed',sans-serif;
  font-size: 42px; font-weight: 900;
  color: var(--user-color);
  box-shadow: 0 0 30px rgba(255,122,0,0.25), 0 0 0 1px rgba(255,122,0,0.1);
  position:relative; overflow:hidden;
  cursor:pointer;
  transition:all 0.2s;
}
#v-profile .profile-avatar::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,122,0,0.06) 0%,transparent 60%);
}
#v-profile .profile-avatar:hover { box-shadow: 0 0 40px rgba(255,122,0,0.4), 0 0 0 1px rgba(255,122,0,0.2); }

#v-profile .profile-avatar-img {
  position:absolute; inset:0;
  object-fit:cover; width:100%; height:100%;
  border-radius:11px;
}

#v-profile .av-online {
  position:absolute; bottom:-4px; right:-4px;
  width:18px; height:18px; border-radius:50%;
  background:var(--green);
  border:3px solid var(--bg);
  box-shadow:0 0 8px var(--green);
}

#v-profile .av-edit-overlay {
  position:absolute; inset:0; border-radius:11px;
  background:rgba(0,0,0,0.7);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px;
  opacity:0; transition:opacity 0.15s;
  cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px; font-weight:700; color:#fff; letter-spacing:1px;
  text-transform:uppercase;
}
#v-profile .profile-avatar:hover .av-edit-overlay { opacity:1; }

#v-profile .profile-meta { flex:1; padding-bottom:6px; }

#v-profile .profile-badges-row {
  display:flex; align-items:center; gap:6px; margin-bottom:8px; flex-wrap:wrap;
}
#v-profile .prof-badge {
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  padding:3px 9px; border-radius:3px;
}
#v-profile .pb-encoder { background:rgba(255,208,0,0.15); color:var(--yellow); border:1px solid rgba(255,208,0,0.3); }
#v-profile .pb-vip { background:rgba(157,92,255,0.15); color:var(--purple); border:1px solid rgba(157,92,255,0.3); }
#v-profile .pb-verified { background:rgba(0,232,122,0.1); color:var(--green); border:1px solid rgba(0,232,122,0.25); }
#v-profile .pb-trusted { background:rgba(255,122,0,0.12); color:var(--orange); border:1px solid rgba(255,122,0,0.3); }
#v-profile .pb-og { background:rgba(255,61,205,0.12); color:var(--pink); border:1px solid rgba(255,61,205,0.25); }

#v-profile .profile-name {
  font-family: 'Barlow Condensed',sans-serif;
  font-size: 40px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 8px;
  display:flex; align-items:center; gap:12px;
}
#v-profile .profile-name .verified-icon {
  font-size:20px; color:var(--green);
  filter:drop-shadow(0 0 6px var(--green));
}

#v-profile .profile-title {
  font-family:'JetBrains Mono',monospace;
  font-size:12px; color:var(--dim); font-style:italic;
  margin-bottom:10px;
}

#v-profile .profile-status-row {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:12px; color:var(--dim);
}
#v-profile .profile-status-row span { display:flex; align-items:center; gap:5px; }
#v-profile .profile-status-row i { font-size:10px; }

#v-profile .profile-actions {
  display:flex; flex-direction:column; gap:8px; flex-shrink:0; padding-bottom:6px;
}
#v-profile .prof-btn {
  display:flex; align-items:center; gap:7px;
  padding:9px 20px;
  font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; cursor:pointer;
  transition:all 0.15s; border-radius:3px; border:none;
}
#v-profile .prof-btn.primary { background:var(--orange); color:#000; }
#v-profile .prof-btn.primary:hover { background:var(--orange2); }
#v-profile .prof-btn.secondary { background:transparent; color:var(--grey); border:1px solid var(--border); }
#v-profile .prof-btn.secondary:hover { border-color:var(--cyan); color:var(--cyan); }
#v-profile .prof-btn-row { display:flex; gap:6px; }
#v-profile .prof-btn-row .prof-btn { flex:1; justify-content:center; padding:7px 12px; font-size:12px; }

/* ═══════════════════════════════════════
   QUICK STATS BAR
═══════════════════════════════════════ */
#v-profile .quick-stats-bar {
  display:grid;
  grid-template-columns: repeat(6,1fr);
  gap:1px; background:var(--border);
  border:1px solid var(--border);
  margin-bottom:20px;
  border-radius:4px; overflow:hidden;
}
#v-profile .qs-cell {
  background: var(--card2);
  padding:14px 10px;
  text-align:center;
  transition:background 0.15s;
  cursor:default;
}
#v-profile .qs-cell:hover { background:var(--card); }
#v-profile .qs-num {
  font-family:'Barlow Condensed',sans-serif;
  font-size:26px; font-weight:900; line-height:1; margin-bottom:3px;
}
#v-profile .qs-lbl {
  font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:1.5px;
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
}

/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
#v-profile .profile-grid {
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:16px;
}

/* ═══════════════════════════════════════
   SECTION CARD
═══════════════════════════════════════ */
#v-profile .sc {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
  margin-bottom:14px;
}
#v-profile .sc-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 14px;
  background:var(--card2);
  border-bottom:1px solid var(--border);
  border-left:3px solid var(--orange);
}
#v-profile .sc-head.cyan { border-left-color:var(--cyan); }
#v-profile .sc-head.green { border-left-color:var(--green); }
#v-profile .sc-head.purple { border-left-color:var(--purple); }
#v-profile .sc-head.pink { border-left-color:var(--pink); }
#v-profile .sc-head.yellow { border-left-color:var(--yellow); }
#v-profile .sc-head.grey { border-left-color:var(--dim); }

#v-profile .sc-title {
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:#fff; display:flex; align-items:center; gap:8px;
}
#v-profile .sc-title i { font-size:11px; color:var(--orange); }
#v-profile .sc-head.cyan   .sc-title i { color:var(--cyan); }
#v-profile .sc-head.green  .sc-title i { color:var(--green); }
#v-profile .sc-head.purple .sc-title i { color:var(--purple); }
#v-profile .sc-head.pink   .sc-title i { color:var(--pink); }
#v-profile .sc-head.yellow .sc-title i { color:var(--yellow); }
#v-profile .sc-meta {
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px; color:var(--dim); letter-spacing:0.5px;
}

/* ═══════════════════════════════════════
   LEFT SIDEBAR
═══════════════════════════════════════ */

/* Info rows */
#v-profile .info-row {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; border-bottom:1px solid var(--border2);
  font-size:12px;
}
#v-profile .info-row:last-child { border-bottom:none; }
#v-profile .info-key {
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--dim); width:90px; flex-shrink:0;
  display:flex; align-items:center; gap:5px;
}
#v-profile .info-key i { width:12px; text-align:center; }
#v-profile .info-val { color:var(--white); flex:1; font-size:12px; }
#v-profile .info-val.green { color:var(--green); }
#v-profile .info-val.orange { color:var(--orange); }
#v-profile .info-val.cyan { color:var(--cyan); font-family:'JetBrains Mono',monospace; font-size:11px; }

/* Rep bar */
#v-profile .rep-bar-wrap { padding:14px; }
#v-profile .rep-bar-header {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;
}
#v-profile .rep-label {
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px; font-weight:800; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--dim);
  display:flex; align-items:center; gap:5px;
}
#v-profile .rep-val {
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px; font-weight:900; color:var(--green); line-height:1;
}
#v-profile .rep-track {
  height:5px; background:var(--border);
  border-radius:3px; overflow:hidden; margin-bottom:5px;
}
#v-profile .rep-fill {
  height:100%; border-radius:3px;
  background:linear-gradient(90deg,var(--green),var(--cyan));
  transition:width 1s cubic-bezier(0.4,0,0.2,1);
}
#v-profile .rep-sub {
  display:flex; justify-content:space-between;
  font-size:9px; color:var(--dim);
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:1px;
  text-transform:uppercase;
}

/* Sign quota */
#v-profile .quota-wrap { padding:12px 14px; border-top:1px solid var(--border2); }
#v-profile .quota-header {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;
}
#v-profile .quota-label {
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--dim); display:flex; align-items:center; gap:5px;
}
#v-profile .quota-count {
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px; font-weight:900; color:var(--orange);
}
#v-profile .quota-track { height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
#v-profile .quota-fill {
  height:100%; border-radius:2px;
  background:linear-gradient(90deg,var(--orange),var(--yellow));
}

/* Achievements mini-grid */
#v-profile .achiev-grid {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:4px; padding:12px;
}
#v-profile .achiev {
  aspect-ratio:1; border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  border:1px solid transparent;
  cursor:pointer; transition:all 0.15s;
  position:relative;
}
#v-profile .achiev:hover { transform:scale(1.15); z-index:5; }
#v-profile .achiev.locked {
  background:rgba(255,255,255,0.02);
  border-color:var(--border2); font-size:10px; color:var(--dim);
}
#v-profile .achiev[title]:hover::after {
  content:attr(title);
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:#000; border:1px solid var(--border); color:var(--white);
  font-family:'Barlow',sans-serif; font-size:10px; font-weight:600;
  white-space:nowrap; padding:3px 8px; border-radius:3px;
  pointer-events:none; z-index:99;
}

/* Social links */
#v-profile .social-row {
  display:flex; align-items:center; gap:10px;
  padding:8px 14px; border-bottom:1px solid var(--border2);
  font-size:12px; transition:background 0.15s; cursor:pointer;
}
#v-profile .social-row:last-child { border-bottom:none; }
#v-profile .social-row:hover { background:rgba(255,255,255,0.02); }
#v-profile .social-icon {
  width:26px; height:26px; border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; flex-shrink:0;
}
#v-profile .social-name { color:var(--grey); flex:1; }
#v-profile .social-handle { color:var(--cyan); font-family:'JetBrains Mono',monospace; font-size:11px; }

/* ═══════════════════════════════════════
   RIGHT COLUMN — TABS
═══════════════════════════════════════ */
#v-profile .tab-bar {
  display:flex; background:var(--card2); border:1px solid var(--border);
  border-radius:4px 4px 0 0; overflow:hidden; margin-bottom:0;
}
#v-profile .tab-item {
  flex:1; padding:11px 6px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color:var(--dim); cursor:pointer; text-align:center;
  border-right:1px solid var(--border2); transition:all 0.15s;
  border-bottom:2px solid transparent; display:flex; align-items:center; justify-content:center; gap:5px;
}
#v-profile .tab-item:last-child { border-right:none; }
#v-profile .tab-item:hover { color:var(--grey); background:rgba(255,255,255,0.02); }
#v-profile .tab-item.active { color:var(--orange); border-bottom-color:var(--orange); background:rgba(255,122,0,0.04); }

#v-profile .tab-content { display:none; }
#v-profile .tab-content.active { display:block; }

/* IPA grid */
#v-profile .ipa-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--border);
}
#v-profile .ipa-card {
  background:var(--card);
  padding:14px 16px;
  display:flex; align-items:center; gap:12px;
  cursor:pointer; transition:background 0.15s;
  position:relative; overflow:hidden;
}
#v-profile .ipa-card::before {
  content:'';
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--orange); opacity:0; transition:opacity 0.15s;
}
#v-profile .ipa-card:hover { background:rgba(255,122,0,0.04); }
#v-profile .ipa-card:hover::before { opacity:1; }
#v-profile .ipa-icon {
  width:48px; height:48px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden; border:1px solid rgba(255,255,255,0.08);
}
#v-profile .ipa-icon img { width:30px; height:30px; object-fit:contain; }
#v-profile .ipa-info { flex:1; min-width:0; }
#v-profile .ipa-name {
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px; font-weight:800; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px;
}
#v-profile .ipa-bundle {
  font-family:'JetBrains Mono',monospace;
  font-size:9px; color:var(--cyan); margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#v-profile .ipa-meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#v-profile .ipa-ver { font-size:10px; color:var(--dim); }
#v-profile .ipa-dl { font-size:10px; color:var(--green); display:flex; align-items:center; gap:3px; font-weight:600; }
#v-profile .ipa-badge {
  font-size:8px; font-weight:800; padding:1px 5px; border-radius:2px;
  font-family:'Barlow Condensed',sans-serif; letter-spacing:0.5px; text-transform:uppercase;
}
#v-profile .ib-hot { background:rgba(255,122,0,0.15); color:var(--orange); border:1px solid rgba(255,122,0,0.3); }
#v-profile .ib-new { background:rgba(0,232,122,0.1); color:var(--green); border:1px solid rgba(0,232,122,0.25); }
#v-profile .ib-upd { background:rgba(0,212,255,0.1); color:var(--cyan); border:1px solid rgba(0,212,255,0.2); }

#v-profile .ipa-sign-count {
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px; font-weight:900; color:var(--dim);
  flex-shrink:0; text-align:right; line-height:1;
}
#v-profile .ipa-sign-count small {
  display:block; font-size:8px; color:var(--dim);
  text-transform:uppercase; letter-spacing:1px; font-weight:700;
}

/* Dylib cards */
#v-profile .dylib-card {
  background:var(--card);
  padding:14px 16px;
  display:flex; gap:14px; align-items:center;
  border-bottom:1px solid var(--border2);
  cursor:pointer; transition:background 0.15s;
  position:relative; overflow:hidden;
}
#v-profile .dylib-card::before {
  content:''; position:absolute;
  left:0; top:0; bottom:0; width:3px;
  background:var(--purple); opacity:0; transition:opacity 0.15s;
}
#v-profile .dylib-card:hover { background:rgba(157,92,255,0.04); }
#v-profile .dylib-card:hover::before { opacity:1; }
#v-profile .dylib-card:last-child { border-bottom:none; }
#v-profile .dl-icon {
  width:48px; height:48px; border-radius:10px;
  background:rgba(157,92,255,0.1);
  border:1px solid rgba(157,92,255,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--purple); flex-shrink:0;
}
#v-profile .dl-icon.orange { background:rgba(255,122,0,0.1); border-color:rgba(255,122,0,0.2); color:var(--orange); }
#v-profile .dl-icon.cyan { background:rgba(0,212,255,0.08); border-color:rgba(0,212,255,0.15); color:var(--cyan); }
#v-profile .dl-info { flex:1; min-width:0; }
#v-profile .dl-name {
  font-family:'Barlow Condensed',sans-serif;
  font-size:16px; font-weight:800; color:#fff; margin-bottom:2px;
}
#v-profile .dl-target {
  font-family:'JetBrains Mono',monospace;
  font-size:9px; color:var(--purple); margin-bottom:5px;
}
#v-profile .dl-target.orange { color:var(--orange); }
#v-profile .dl-tags { display:flex; gap:4px; flex-wrap:wrap; }
#v-profile .dl-tag {
  font-size:9px; font-weight:700; padding:2px 6px; border-radius:2px;
  font-family:'Barlow Condensed',sans-serif; letter-spacing:0.5px; text-transform:uppercase;
}
#v-profile .dl-stats {
  text-align:right; flex-shrink:0; display:flex; flex-direction:column; gap:4px; align-items:flex-end;
}
#v-profile .dl-injects {
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px; font-weight:900; color:var(--purple); line-height:1;
}
#v-profile .dl-injects.orange { color:var(--orange); }
#v-profile .dl-injects-lbl { font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:1px; font-family:'Barlow Condensed',sans-serif; }
#v-profile .dl-success { font-size:10px; color:var(--green); font-weight:600; }
#v-profile .dl-ios-compat {
  display:flex; gap:3px; flex-wrap:wrap; justify-content:flex-end; margin-top:3px;
}
#v-profile .ios-dot {
  font-size:9px; padding:1px 5px; border-radius:2px;
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  background:rgba(0,232,122,0.1); color:var(--green); border:1px solid rgba(0,232,122,0.2);
}

/* Posts tab */
#v-profile .post-row {
  display:flex; gap:12px; padding:13px 16px;
  border-bottom:1px solid var(--border2);
  cursor:pointer; transition:background 0.15s;
}
#v-profile .post-row:last-child { border-bottom:none; }
#v-profile .post-row:hover { background:rgba(255,255,255,0.015); }
#v-profile .post-dot {
  width:8px; height:8px; border-radius:50%;
  flex-shrink:0; margin-top:5px;
}
#v-profile .post-content { flex:1; min-width:0; }
#v-profile .post-thread {
  font-size:14px; font-weight:600; color:var(--white);
  margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#v-profile .post-excerpt {
  font-size:12px; color:var(--dim); line-height:1.5; margin-bottom:5px;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
#v-profile .post-meta-row {
  display:flex; align-items:center; gap:10px; font-size:10px; color:var(--dim); flex-wrap:wrap;
}
#v-profile .post-meta-row span { display:flex; align-items:center; gap:3px; }
#v-profile .post-meta-row a { color:var(--orange); }
#v-profile .post-board-tag {
  font-family:'Barlow Condensed',sans-serif;
  font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  padding:1px 6px; border-radius:2px;
  background:rgba(255,255,255,0.05); color:var(--grey); border:1px solid var(--border2);
}

/* Activity tab */
#v-profile .activity-item {
  display:flex; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--border2);
}
#v-profile .activity-item:last-child { border-bottom:none; }
#v-profile .activity-icon-wrap {
  width:34px; height:34px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
#v-profile .act-upload { background:rgba(255,122,0,0.1); border:1px solid rgba(255,122,0,0.2); color:var(--orange); }
#v-profile .act-post { background:rgba(157,92,255,0.1); border:1px solid rgba(157,92,255,0.2); color:var(--purple); }
#v-profile .act-rep { background:rgba(0,232,122,0.1); border:1px solid rgba(0,232,122,0.2); color:var(--green); }
#v-profile .act-inject { background:rgba(0,212,255,0.08); border:1px solid rgba(0,212,255,0.15); color:var(--cyan); }
#v-profile .act-sign { background:rgba(255,208,0,0.1); border:1px solid rgba(255,208,0,0.2); color:var(--yellow); }
#v-profile .activity-body { flex:1; min-width:0; }
#v-profile .activity-text { font-size:13px; color:var(--grey); line-height:1.5; margin-bottom:3px; }
#v-profile .activity-text strong { color:var(--white); }
#v-profile .activity-time { font-size:10px; color:var(--dim); }

/* Stats tab */
#v-profile .stats-big-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:1px; background:var(--border);
}
#v-profile .stat-big-cell {
  background:var(--card); padding:18px 16px;
}
#v-profile .stat-big-lbl {
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:var(--dim); margin-bottom:8px;
}
#v-profile .stat-big-num {
  font-family:'Barlow Condensed',sans-serif;
  font-size:42px; font-weight:900; line-height:1; margin-bottom:4px;
}
#v-profile .stat-big-sub { font-size:11px; color:var(--dim); }

#v-profile .stat-bar-row { padding:12px 16px; border-bottom:1px solid var(--border2); }
#v-profile .stat-bar-row:last-child { border-bottom:none; }
#v-profile .stat-bar-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:6px; font-size:12px;
}
#v-profile .stat-bar-label { color:var(--grey); }
#v-profile .stat-bar-val {
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px; font-weight:800;
}
#v-profile .stat-track { height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
#v-profile .stat-fill { height:100%; border-radius:2px; }

/* Friends grid */
#v-profile .friends-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:8px; padding:14px;
}
#v-profile .friend-card {
  background:var(--card2); border:1px solid var(--border);
  padding:14px 8px; text-align:center; cursor:pointer;
  border-radius:4px; transition:all 0.15s;
}
#v-profile .friend-card:hover { border-color:var(--orange); background:rgba(255,122,0,0.04); }
#v-profile .friend-av {
  width:48px; height:48px; border-radius:50%; margin:0 auto 8px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:900;
  border:2px solid;
}
#v-profile .friend-name { font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:800; margin-bottom:2px; }
#v-profile .friend-role { font-size:10px; color:var(--dim); }

/* Vouches */
#v-profile .vouch-row {
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-bottom:1px solid var(--border2);
}
#v-profile .vouch-row:last-child { border-bottom:none; }
#v-profile .vouch-av {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:800;
  border:1px solid; flex-shrink:0;
}
#v-profile .vouch-body { flex:1; min-width:0; }
#v-profile .vouch-name { font-size:13px; font-weight:600; color:#fff; }
#v-profile .vouch-text { font-size:11px; color:var(--dim); margin-top:2px; font-style:italic; }
#v-profile .vouch-time { font-size:10px; color:var(--dim); flex-shrink:0; }

/* ═══════════════════════════════════════
   PAGINATION
═══════════════════════════════════════ */
#v-profile .pagination {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px; border-top:1px solid var(--border2);
}
#v-profile .pg-info { font-size:11px; color:var(--dim); }
#v-profile .pg-btns { display:flex; gap:3px; }
#v-profile .pg-b {
  width:28px; height:28px; background:var(--card2); border:1px solid var(--border);
  color:var(--grey); font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700;
  cursor:pointer; transition:all 0.15s; display:flex; align-items:center; justify-content:center;
  border-radius:2px;
}
#v-profile .pg-b:hover { border-color:var(--orange); color:var(--orange); }
#v-profile .pg-b.active { background:var(--orange); border-color:var(--orange); color:#000; }

/* ═══════════════════════════════════════
   SIGNATURE
═══════════════════════════════════════ */
#v-profile .sig-box {
  background:linear-gradient(135deg,var(--card2),var(--card));
  border:1px solid var(--border);
  border-left:3px solid var(--orange);
  padding:14px 16px;
  font-size:12px; color:var(--dim); font-style:italic; line-height:1.7;
  border-radius:0 3px 3px 0;
  margin:0 14px 14px;
}
#v-profile .sig-label {
  font-family:'Barlow Condensed',sans-serif;
  font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:var(--dim); margin-bottom:6px; display:flex; align-items:center; gap:4px;
}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
#v-profile .footer {
  border-top:1px solid var(--border);
  padding:16px 24px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; color:var(--dim);
  margin-top:20px;
}
#v-profile .footer a { color:var(--dim); transition:color 0.15s; }
#v-profile .footer a:hover { color:var(--cyan); }
#v-profile .footer-links { display:flex; gap:16px; }

/* ═══════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════ */
@keyframes glow-pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
#v-profile .online-dot { animation:glow-pulse 2s infinite; }

@keyframes slide-in {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
#v-profile .profile-header { animation:slide-in 0.4s ease; }
#v-profile .quick-stats-bar { animation:slide-in 0.4s ease 0.1s both; }
#v-profile .profile-grid { animation:slide-in 0.4s ease 0.2s both; }


/* ═══════════════════════════════════════
   MODAL SYSTEM
═══════════════════════════════════════ */
.zs-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.zs-modal-overlay.open {
  opacity: 1; pointer-events: all;
}
.zs-modal {
  background: #0d1014;
  border: 1px solid #1e2530;
  border-radius: 6px;
  width: 480px; max-width: 94vw;
  max-height: 90vh; overflow-y: auto;
  transform: translateY(16px);
  transition: transform 0.2s;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
}
.zs-modal-overlay.open .zs-modal {
  transform: translateY(0);
}
.zs-modal-sm { width: 360px; }
.zs-modal-lg { width: 560px; }

.zs-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: #0f1318;
  border-bottom: 1px solid #1e2530;
  border-radius: 6px 6px 0 0;
}
.zs-modal-title {
  font-family: 'Oswald', sans-serif;
  font-size: 15px; font-weight: 700; color: #fff;
  letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px;
}
.zs-modal-title i { font-size: 13px; }
.zs-modal-close {
  width: 28px; height: 28px;
  background: transparent; border: 1px solid #1e2530;
  color: #445566; cursor: pointer; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; transition: all 0.15s;
}
.zs-modal-close:hover { border-color: #ff3333; color: #ff3333; }
.zs-modal-body { padding: 18px; }
.zs-modal-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 18px;
  background: #0f1318;
  border-top: 1px solid #1e2530;
  border-radius: 0 0 6px 6px;
}

/* PM Modal */
.pm-to-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: #0a0d10; border: 1px solid #1e2530; border-radius: 4px;
  margin-bottom: 12px;
}
.pm-to-av {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 700;
  border: 2px solid; flex-shrink: 0;
}
.pm-to-label { font-size: 10px; color: #445566; font-family: 'Oswald',sans-serif; text-transform: uppercase; letter-spacing: 1px; }
.pm-to-name { font-size: 13px; font-weight: 700; }
.zs-input, .zs-textarea {
  width: 100%; background: #060a0d; border: 1px solid #1e2530;
  color: #e8ecf0; padding: 9px 12px; font-size: 12px;
  font-family: 'Rajdhani', sans-serif; outline: none; border-radius: 3px;
  transition: border-color 0.15s; box-sizing: border-box;
}
.zs-input:focus, .zs-textarea:focus { border-color: #ff7a00; }
.zs-input::placeholder, .zs-textarea::placeholder { color: #2a3a4a; }
.zs-textarea { resize: vertical; min-height: 100px; }
.zs-label {
  font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 700;
  color: #445566; letter-spacing: 1.5px; text-transform: uppercase;
  display: block; margin-bottom: 6px;
}
.zs-form-group { margin-bottom: 14px; }
.zs-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 20px;
  font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 0.5px; cursor: pointer; border-radius: 3px;
  transition: all 0.15s; border: none;
}
.zs-btn.primary { background: #ff7a00; color: #000; }
.zs-btn.primary:hover { background: #ff9a30; }
.zs-btn.secondary { background: transparent; color: #8899aa; border: 1px solid #1e2530; }
.zs-btn.secondary:hover { border-color: #00d4ff; color: #00d4ff; }
.zs-btn.success { background: transparent; color: #00e87a; border: 1px solid rgba(0,232,122,0.3); }
.zs-btn.success:hover { background: rgba(0,232,122,0.08); }
.zs-btn.danger { background: transparent; color: #ff3333; border: 1px solid rgba(255,51,51,0.3); }
.zs-btn.danger:hover { background: rgba(255,51,51,0.06); }

/* Rep Modal */
.rep-user-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; background: #0a0d10;
  border: 1px solid #1e2530; border-radius: 4px; margin-bottom: 16px;
}
.rep-av {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 700;
  border: 2px solid; flex-shrink: 0;
}
.rep-cur-val {
  font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 700;
  color: #00e87a;
}
.rep-type-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 14px;
}
.rep-type-btn {
  padding: 10px; border-radius: 4px;
  border: 1px solid #1e2530; background: #0a0d10;
  cursor: pointer; text-align: center; transition: all 0.15s;
}
.rep-type-btn:hover, .rep-type-btn.selected {
  border-color: #00e87a; background: rgba(0,232,122,0.06);
}
.rep-type-btn i { font-size: 16px; display: block; margin-bottom: 4px; }
.rep-type-btn span { font-family: 'Oswald',sans-serif; font-size: 11px; color: #8899aa; }
.rep-type-btn.selected span { color: #00e87a; }

/* Vouch Modal */
.vouch-stars {
  display: flex; gap: 6px; margin-bottom: 14px;
}
.vouch-star {
  width: 36px; height: 36px; border-radius: 4px;
  border: 1px solid #1e2530; background: #0a0d10;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px; transition: all 0.15s;
}
.vouch-star.active { border-color: #ffd000; background: rgba(255,208,0,0.08); }
.vouch-tags-grid {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}
.vouch-tag-btn {
  padding: 5px 12px; border-radius: 20px; cursor: pointer;
  font-size: 11px; font-family: 'Oswald',sans-serif; font-weight: 700;
  letter-spacing: 0.5px;
  border: 1px solid #1e2530; background: #0a0d10; color: #8899aa;
  transition: all 0.15s;
}
.vouch-tag-btn:hover, .vouch-tag-btn.selected {
  border-color: #9d5cff; color: #9d5cff; background: rgba(157,92,255,0.06);
}

/* ── Notifications Panel ── */
#notif-overlay .cp-header { border-bottom-color: var(--cyan); }
#notif-overlay .cp-header-icon { background:rgba(0,204,255,0.12); color:var(--cyan); border:1px solid rgba(0,204,255,0.25); }
#notif-overlay .cp-nav-item.active { background:rgba(0,204,255,0.1); color:var(--cyan); border-color:rgba(0,204,255,0.2); }
#notif-overlay .cp-close-btn:hover { border-color:var(--cyan); color:var(--cyan); }
#notif-overlay .cp-card-head { border-left-color:var(--cyan); }
#notif-overlay .cp-card-head i { color:var(--cyan); }
.notif-panel-row {
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 18px; border-bottom:1px solid var(--border2);
  cursor:pointer; transition:background 0.15s; position:relative;
}
.notif-panel-row:last-child { border-bottom:none; }
.notif-panel-row:hover { background:rgba(255,255,255,0.02); }
.notif-panel-row.unread { background:rgba(255,122,0,0.025); }
.notif-panel-icon {
  width:34px; height:34px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
.notif-panel-body { flex:1; min-width:0; }
.notif-panel-text { font-size:12px; color:var(--grey); line-height:1.55; }
.notif-panel-text strong { color:#e8ecf0; }
.notif-panel-time { font-size:10px; color:var(--dim); margin-top:3px; }
.notif-panel-dot { width:7px; height:7px; border-radius:50%; background:var(--orange); flex-shrink:0; margin-top:5px; }

/* ── PM Panel ── */
#pm-overlay .cp-header { border-bottom-color: #a066ff; }
#pm-overlay .cp-header-icon { background:rgba(160,102,255,0.12); color:#a066ff; border:1px solid rgba(160,102,255,0.25); }
#pm-overlay .cp-nav-item.active { background:rgba(160,102,255,0.1); color:#a066ff; border-color:rgba(160,102,255,0.2); }
#pm-overlay .cp-close-btn:hover { border-color:#a066ff; color:#a066ff; }
#pm-overlay .cp-card-head { border-left-color:#a066ff; }
#pm-overlay .cp-card-head i { color:#a066ff; }
.pm-panel-row {
  display:flex; align-items:center; gap:12px;
  padding:12px 18px; border-bottom:1px solid var(--border2);
  cursor:pointer; transition:background 0.15s;
}
.pm-panel-row:last-child { border-bottom:none; }
.pm-panel-row:hover { background:rgba(255,255,255,0.02); }
.pm-panel-row.unread { background:rgba(160,102,255,0.03); }
.pm-panel-av {
  width:36px; height:36px; border-radius:50%; border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; font-size:13px; font-weight:700;
  flex-shrink:0; background:var(--card2);
}
.pm-panel-meta { flex:1; min-width:0; }
.pm-panel-from { font-size:13px; font-weight:700; color:#e8ecf0; margin-bottom:2px; }
.pm-panel-subject { font-size:11px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-panel-row.unread .pm-panel-from { color:#fff; }
.pm-panel-row.unread .pm-panel-subject { color:#c0c8d0; }
.pm-panel-time { font-size:10px; color:var(--dim); flex-shrink:0; }
.pm-panel-unread-dot { width:7px; height:7px; border-radius:50%; background:#a066ff; flex-shrink:0; }
.pm-compose-area { padding:18px; display:flex; flex-direction:column; gap:12px; }

.zs-toast-container {
  position: fixed; top: 60px; right: 20px;
  z-index: 9999; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.zs-toast {
  display: flex; align-items: center; gap: 10px;
  background: #0f1318; border: 1px solid #1e2530;
  padding: 12px 16px; border-radius: 4px; min-width: 260px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  transform: translateX(100%); opacity: 0;
  transition: all 0.3s; pointer-events: all;
  border-left-width: 3px;
}
.zs-toast.show { transform: translateX(0); opacity: 1; }
.zs-toast.success { border-left-color: #00e87a; }
.zs-toast.error   { border-left-color: #ff3333; }
.zs-toast.info    { border-left-color: #00d4ff; }
.zs-toast.warning { border-left-color: #ffd000; }
.zs-toast-icon { font-size: 14px; flex-shrink: 0; }
.zs-toast.success .zs-toast-icon { color: #00e87a; }
.zs-toast.error   .zs-toast-icon { color: #ff3333; }
.zs-toast.info    .zs-toast-icon { color: #00d4ff; }
.zs-toast.warning .zs-toast-icon { color: #ffd000; }
.zs-toast-text { flex: 1; font-size: 12px; color: #e8ecf0; }
.zs-toast-title { font-family: 'Oswald',sans-serif; font-size: 13px; font-weight: 700; color: #fff; display: block; margin-bottom: 1px; }

/* Inbox / PM Inbox Modal */
.pm-inbox-list { display: flex; flex-direction: column; }
.pm-inbox-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid #131820;
  cursor: pointer; transition: background 0.1s; border-radius: 3px;
}
.pm-inbox-row:hover { background: rgba(255,255,255,0.02); padding-left: 6px; }
.pm-inbox-row:last-child { border-bottom: none; }
.pm-inbox-av {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Oswald',sans-serif; font-size: 13px; font-weight: 700;
  border: 2px solid;
}
.pm-inbox-meta { flex: 1; min-width: 0; }
.pm-inbox-from { font-size: 13px; font-weight: 700; color: #e8ecf0; margin-bottom: 2px; }
.pm-inbox-subject { font-size: 11px; color: #8899aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-inbox-time { font-size: 10px; color: #445566; flex-shrink: 0; }
.pm-inbox-unread .pm-inbox-from { color: #fff; }
.pm-inbox-unread .pm-inbox-subject { color: #e8ecf0; }
.unread-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff7a00; flex-shrink: 0;
}

/* Notification dropdown */
.notif-dropdown {
  position: fixed;
  width: 320px; background: #0d1014;
  border: 1px solid #1e2530; border-radius: 5px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  z-index: 9999; display: none;
}
.notif-dropdown.open { display: block; }
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid #131820;
  font-family: 'Oswald',sans-serif; font-size: 13px; font-weight: 700; color: #fff;
}
.notif-mark-all { font-size: 10px; color: #445566; cursor: pointer; font-family: 'Oswald',sans-serif; text-transform: uppercase; letter-spacing: 1px; }
.notif-mark-all:hover { color: #ff7a00; }
.notif-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid #131820;
  cursor: pointer; transition: background 0.1s;
}
.notif-row:hover { background: rgba(255,255,255,0.02); }
.notif-row:last-child { border-bottom: none; }
.notif-row.unread { background: rgba(255,122,0,0.03); }
.notif-icon {
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.notif-text { flex: 1; font-size: 11px; color: #8899aa; line-height: 1.5; }
.notif-text strong { color: #e8ecf0; }
.notif-time { font-size: 9px; color: #2a3a4a; flex-shrink: 0; margin-top: 2px; }

/* Like button active state */
.post-action-btn.liked { color: #ff7a00; }
.post-action-btn { cursor: pointer; user-select: none; }
.pb-action-btn.active { background: rgba(0,232,122,0.12); border-color: rgba(0,232,122,0.4); color: #00e87a; }

/* Report modal */
.report-reason-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.report-reason {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid #1e2530; border-radius: 4px;
  cursor: pointer; transition: all 0.15s;
}
.report-reason:hover, .report-reason.selected { border-color: #ff3333; background: rgba(255,51,51,0.04); }
.report-reason input { display: none; }
.report-reason-dot {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid #1e2530;
  flex-shrink: 0; transition: all 0.15s;
}
.report-reason.selected .report-reason-dot { border-color: #ff3333; background: #ff3333; }
.report-reason-text { font-size: 12px; color: #8899aa; }
.report-reason.selected .report-reason-text { color: #e8ecf0; }


/* ═══════════════════════════════════════
   PROFILE — AVATAR UPLOAD MODAL
═══════════════════════════════════════ */
#prof-av-modal {
  display:none; position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.75); backdrop-filter:blur(6px);
  align-items:center; justify-content:center;
}
#prof-av-modal.open { display:flex; }
#prof-av-modal .av-modal-box {
  background:var(--card); border:1px solid var(--border);
  border-radius:6px; padding:20px; width:320px; max-width:90vw;
}
#prof-av-modal h4 {
  font-family:'Barlow Condensed',sans-serif; font-size:13px;
  font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:#fff; margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
#prof-av-modal h4 i { color:var(--orange); }
.av-modal-preview {
  width:80px; height:80px; border-radius:10px;
  margin:0 auto 14px; overflow:hidden;
  border:2px solid var(--border);
  background:#111; display:flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed',sans-serif; font-size:28px; font-weight:900;
  color:var(--orange);
}
.av-modal-preview img { width:100%; height:100%; object-fit:cover; }
.av-modal-upload-btn {
  width:100%; background:rgba(255,122,0,0.1); border:1px dashed rgba(255,122,0,0.4);
  color:var(--orange); padding:10px; font-family:'Barlow Condensed',sans-serif;
  font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  cursor:pointer; border-radius:3px; transition:all 0.15s; margin-bottom:8px;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.av-modal-upload-btn:hover { background:rgba(255,122,0,0.18); border-color:var(--orange); }
.av-modal-sep { text-align:center; color:var(--dim); font-size:10px;
  font-family:'Barlow Condensed',sans-serif; letter-spacing:2px;
  text-transform:uppercase; margin:8px 0; }
.av-modal-url-input {
  width:100%; background:#060a0d; border:1px solid var(--border);
  color:#fff; padding:7px 10px; font-size:11px; font-family:'Barlow',sans-serif;
  outline:none; border-radius:2px; margin-bottom:8px;
}
.av-modal-url-input::placeholder { color:var(--dim); }
.av-modal-url-input:focus { border-color:var(--orange); }
.av-modal-actions { display:flex; gap:8px; margin-top:10px; }
.av-modal-apply {
  flex:1; background:var(--orange); border:none; color:#000;
  padding:8px; font-family:'Barlow Condensed',sans-serif;
  font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  cursor:pointer; border-radius:2px; transition:all 0.15s;
}
.av-modal-apply:hover { background:var(--orange2); }
.av-modal-cancel {
  background:transparent; border:1px solid var(--border); color:var(--grey);
  padding:8px 14px; font-family:'Barlow Condensed',sans-serif;
  font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  cursor:pointer; border-radius:2px; transition:all 0.15s;
}
.av-modal-cancel:hover { border-color:var(--red); color:var(--red); }
.av-modal-reset {
  background:transparent; border:1px solid rgba(255,51,51,0.3); color:var(--red);
  padding:8px 14px; font-family:'Barlow Condensed',sans-serif;
  font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  cursor:pointer; border-radius:2px; transition:all 0.15s;
}
.av-modal-reset:hover { border-color:var(--red); background:rgba(255,51,51,0.08); }

/* ═══════════════════════════════════════
   PROFILE — MOBILE RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 860px) {
  #v-profile .profile-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  #v-profile .profile-banner-wrap { height: 180px; }

  #v-profile .profile-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: -55px;
    gap: 12px;
    padding-bottom: 16px;
  }

  #v-profile .profile-avatar { width:90px; height:90px; font-size:32px; }

  #v-profile .profile-meta { width:100%; }

  #v-profile .profile-badges-row { justify-content:center; }

  #v-profile .profile-name { font-size:28px; justify-content:center; }

  #v-profile .profile-title { text-align:center; }

  #v-profile .profile-status-row {
    justify-content:center;
    gap:8px;
    font-size:11px;
  }

  #v-profile .profile-actions {
    width:100%; align-items:stretch;
  }

  #v-profile .quick-stats-bar {
    grid-template-columns: repeat(3,1fr);
  }

  #v-profile .page { padding:0 12px 40px; }

  #v-profile .bg-picker-panel {
    right:8px; left:8px; width:auto;
  }

  #v-profile .banner-edit-btn { font-size:10px; padding:5px 10px; }

  /* Tab bar scroll on mobile */
  #v-profile .tab-bar {
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; flex-wrap:nowrap;
  }
  #v-profile .tab-bar::-webkit-scrollbar { display:none; }
  #v-profile .tab-item { white-space:nowrap; flex-shrink:0; }

  #v-profile .prof-btn-row { flex-wrap:wrap; }
}

@media (max-width: 420px) {
  #v-profile .quick-stats-bar { grid-template-columns: repeat(2,1fr); }
  #v-profile .profile-name { font-size:22px; }
}

/* ═══════════════════════════════════
   UCP / ACP — FULL PAGE PANELS
═══════════════════════════════════ */
.cp-overlay {
  display:none; position:fixed; inset:0; z-index:10000;
  background:rgba(0,0,0,0.85); backdrop-filter:blur(8px);
  overflow-y:auto;
}
.cp-overlay.open { display:block; }

.cp-shell {
  max-width:1000px; margin:0 auto; padding:24px 16px 60px;
}

/* Header bar */
.cp-header {
  display:flex; align-items:center; gap:14px;
  border-bottom:2px solid var(--orange);
  padding-bottom:14px; margin-bottom:20px;
}
.cp-header-icon {
  width:44px; height:44px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.cp-header-icon.orange { background:rgba(255,136,0,0.15); color:var(--orange); border:1px solid rgba(255,136,0,0.3); }
.cp-header-icon.red    { background:rgba(255,51,51,0.15);  color:#ff3333;       border:1px solid rgba(255,51,51,0.3); }
.cp-header-title {
  font-family:'Oswald',sans-serif; font-size:22px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:#fff;
}
.cp-header-sub { font-size:11px; color:var(--dim); margin-top:2px; }
.cp-close-btn {
  margin-left:auto; background:transparent; border:1px solid var(--border);
  color:var(--grey); padding:7px 14px; cursor:pointer;
  font-family:'Oswald',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; border-radius:3px;
  transition:all 0.15s; display:flex; align-items:center; gap:7px;
}
.cp-close-btn:hover { border-color:var(--red); color:var(--red); }

/* Two-column layout */
.cp-layout { display:grid; grid-template-columns:200px 1fr; gap:16px; }
@media(max-width:640px){ .cp-layout { grid-template-columns:1fr; } }

/* Sidebar nav */
.cp-nav { display:flex; flex-direction:column; gap:2px; }
.cp-nav-section {
  font-family:'Oswald',sans-serif; font-size:9px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:var(--dim);
  padding:10px 10px 4px; margin-top:4px;
}
.cp-nav-section:first-child { margin-top:0; }
.cp-nav-item {
  display:flex; align-items:center; gap:9px;
  padding:8px 12px; border-radius:3px;
  font-family:'Oswald',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:0.5px; text-transform:uppercase; cursor:pointer;
  transition:all 0.15s; color:var(--grey); border:1px solid transparent;
}
.cp-nav-item i { width:14px; text-align:center; font-size:11px; }
.cp-nav-item:hover { background:rgba(255,255,255,0.04); color:#fff; }
.cp-nav-item.active { background:rgba(255,136,0,0.1); color:var(--orange); border-color:rgba(255,136,0,0.2); }
#acp-overlay .cp-nav-item.active { background:rgba(255,51,51,0.1); color:#ff5555; border-color:rgba(255,51,51,0.2); }

/* Content panes */
.cp-pane { display:none; }
.cp-pane.active { display:block; }

/* Section card */
.cp-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:4px; margin-bottom:16px; overflow:hidden;
}
.cp-card-head {
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; background:var(--card2);
  border-bottom:1px solid var(--border);
  border-left:3px solid var(--orange);
  font-family:'Oswald',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:#fff;
}
.cp-card-head i { color:var(--orange); font-size:11px; }
#acp-overlay .cp-card-head { border-left-color:#ff3333; }
#acp-overlay .cp-card-head i { color:#ff5555; }
.cp-card-head.cyan { border-left-color:var(--cyan); }
.cp-card-head.cyan i { color:var(--cyan); }
.cp-card-head.green { border-left-color:var(--green); }
.cp-card-head.green i { color:var(--green); }
.cp-card-head.purple { border-left-color:var(--purple); }
.cp-card-head.purple i { color:var(--purple); }
.cp-card-body { padding:16px; }

/* Form elements */
.cp-form-row {
  display:grid; grid-template-columns:160px 1fr; gap:12px;
  align-items:start; padding:10px 0;
  border-bottom:1px solid var(--border2);
}
.cp-form-row:last-child { border-bottom:none; }
@media(max-width:500px){ .cp-form-row { grid-template-columns:1fr; } }
.cp-label {
  font-family:'Oswald',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; color:var(--grey);
  padding-top:8px; display:flex; flex-direction:column; gap:3px;
}
.cp-label-sub { font-size:9px; color:var(--dim); letter-spacing:0.5px; font-weight:400; text-transform:none; font-family:'Rajdhani',sans-serif; }
.cp-input {
  background:#060a0d; border:1px solid var(--border);
  color:#fff; padding:8px 12px; font-size:12px;
  font-family:'Rajdhani',sans-serif; font-weight:500;
  outline:none; border-radius:2px; width:100%; transition:border-color 0.15s;
}
.cp-input:focus { border-color:var(--orange); }
#acp-overlay .cp-input:focus { border-color:#ff3333; }
.cp-input::placeholder { color:var(--dim); }
.cp-textarea {
  background:#060a0d; border:1px solid var(--border);
  color:#fff; padding:8px 12px; font-size:12px;
  font-family:'Rajdhani',sans-serif; font-weight:500;
  outline:none; border-radius:2px; width:100%; min-height:80px;
  resize:vertical; transition:border-color 0.15s;
}
.cp-textarea:focus { border-color:var(--orange); }
.cp-select {
  background:#060a0d; border:1px solid var(--border);
  color:#fff; padding:8px 12px; font-size:12px;
  font-family:'Rajdhani',sans-serif; font-weight:500;
  outline:none; border-radius:2px; width:100%; cursor:pointer;
  transition:border-color 0.15s;
}
.cp-select:focus { border-color:var(--orange); }

/* Avatar picker in UCP */
.cp-avatar-row { display:flex; gap:14px; align-items:flex-start; }
.cp-avatar-preview {
  width:72px; height:72px; border-radius:10px; flex-shrink:0;
  background:#111; border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed',sans-serif; font-size:26px; font-weight:900;
  color:var(--orange); overflow:hidden;
}
.cp-avatar-preview img { width:100%; height:100%; object-fit:cover; }
.cp-avatar-controls { display:flex; flex-direction:column; gap:6px; flex:1; }

/* Banner picker */
.cp-banner-preview {
  width:100%; height:80px; border-radius:4px;
  background:linear-gradient(135deg,#0d0d14,#12121e);
  border:1px solid var(--border);
  background-size:cover; background-position:center;
  margin-bottom:10px; position:relative; overflow:hidden;
}
.cp-banner-presets {
  display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-bottom:10px;
}
@media(max-width:500px){ .cp-banner-presets { grid-template-columns:repeat(4,1fr); } }
.cp-banner-preset {
  height:32px; border-radius:3px; cursor:pointer;
  border:2px solid transparent; transition:all 0.15s;
}
.cp-banner-preset:hover, .cp-banner-preset.active { border-color:#fff; transform:scale(1.05); }

/* Upload button */
.cp-upload-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(255,136,0,0.08); border:1px dashed rgba(255,136,0,0.35);
  color:var(--orange); padding:8px 14px; border-radius:3px;
  font-family:'Oswald',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all 0.15s;
  width:100%;
}
.cp-upload-btn:hover { background:rgba(255,136,0,0.15); border-color:var(--orange); }

/* Action buttons */
.cp-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 18px; border-radius:3px; cursor:pointer;
  font-family:'Oswald',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; transition:all 0.15s; border:none;
}
.cp-btn.primary { background:var(--orange); color:#000; }
.cp-btn.primary:hover { background:#ffaa33; }
.cp-btn.danger  { background:rgba(255,51,51,0.15); color:#ff5555; border:1px solid rgba(255,51,51,0.3); }
.cp-btn.danger:hover { background:rgba(255,51,51,0.25); }
.cp-btn.secondary { background:rgba(255,255,255,0.06); color:var(--grey); border:1px solid var(--border); }
.cp-btn.secondary:hover { border-color:var(--cyan); color:var(--cyan); }
.cp-btn-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }

/* Toggle switch */
.cp-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border2); }
.cp-toggle-row:last-child { border-bottom:none; }
.cp-toggle-label { font-size:12px; color:var(--white); }
.cp-toggle-sub { font-size:10px; color:var(--dim); margin-top:2px; }
.cp-toggle {
  position:relative; width:44px; height:24px; flex-shrink:0;
}
.cp-toggle input { opacity:0; width:0; height:0; }
.cp-toggle-track {
  position:absolute; inset:0; background:#222; border-radius:12px;
  cursor:pointer; transition:background 0.2s; border:1px solid var(--border);
}
.cp-toggle input:checked + .cp-toggle-track { background:var(--orange); border-color:var(--orange); }
#acp-overlay .cp-toggle input:checked + .cp-toggle-track { background:#ff3333; border-color:#ff3333; }
.cp-toggle-track::after {
  content:''; position:absolute; left:3px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%; background:#fff;
  transition:left 0.2s; box-shadow:0 1px 3px rgba(0,0,0,0.4);
}
.cp-toggle input:checked + .cp-toggle-track::after { left:23px; }

/* Stat cards in ACP */
.acp-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
@media(max-width:600px){ .acp-stats-grid { grid-template-columns:repeat(2,1fr); } }
.acp-stat-card {
  background:var(--card); border:1px solid var(--border); border-radius:4px;
  padding:14px; text-align:center;
}
.acp-stat-num {
  font-family:'Oswald',sans-serif; font-size:28px; font-weight:700; line-height:1;
  margin-bottom:4px;
}
.acp-stat-lbl { font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:1.5px; font-family:'Oswald',sans-serif; }

/* User list in ACP */
.acp-user-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 16px; border-bottom:1px solid var(--border2);
  transition:background 0.15s;
}
.acp-user-row:last-child { border-bottom:none; }
.acp-user-row:hover { background:rgba(255,255,255,0.02); }
.acp-user-av {
  width:32px; height:32px; border-radius:6px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:900;
}
.acp-user-name { font-family:'Oswald',sans-serif; font-size:13px; font-weight:600; color:#fff; }
.acp-user-meta { font-size:10px; color:var(--dim); margin-top:1px; }
.acp-user-role {
  font-family:'Oswald',sans-serif; font-size:9px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; padding:2px 8px; border-radius:2px;
}
.acp-user-actions { margin-left:auto; display:flex; gap:6px; }
.acp-user-btn {
  background:transparent; border:1px solid var(--border); color:var(--grey);
  padding:4px 10px; border-radius:2px; cursor:pointer;
  font-family:'Oswald',sans-serif; font-size:10px; font-weight:600;
  letter-spacing:0.5px; text-transform:uppercase; transition:all 0.15s;
}
.acp-user-btn:hover { border-color:var(--cyan); color:var(--cyan); }
.acp-user-btn.ban { border-color:rgba(255,51,51,0.3); color:var(--red); }
.acp-user-btn.ban:hover { background:rgba(255,51,51,0.1); }

/* Badge + color inputs */
.cp-color-input {
  display:flex; align-items:center; gap:8px;
}
.cp-color-swatch {
  width:32px; height:32px; border-radius:4px; border:1px solid var(--border);
  cursor:pointer; flex-shrink:0;
}

/* Post management table */
.acp-table { width:100%; border-collapse:collapse; font-size:11px; }
.acp-table th {
  font-family:'Oswald',sans-serif; font-size:9px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--dim);
  padding:8px 12px; border-bottom:1px solid var(--border);
  text-align:left; background:var(--card2);
}
.acp-table td { padding:9px 12px; border-bottom:1px solid var(--border2); color:var(--white); vertical-align:middle; }
.acp-table tr:last-child td { border-bottom:none; }
.acp-table tr:hover td { background:rgba(255,255,255,0.02); }
.acp-td-meta { color:var(--dim); font-size:10px; }

/* Notification badge on UCP/ACP links */
.cp-link-badge {
  background:var(--orange); color:#000; font-size:8px; font-weight:800;
  padding:1px 5px; border-radius:8px; font-family:'Oswald',sans-serif;
  margin-left:auto;
}
#acp-overlay .cp-link-badge { background:#ff3333; }

/* ════════════════════════════════════════════════════════
   GLOBAL MOBILE RESPONSIVE STYLES
════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── PAGE WRAP ── */
  .page-wrap { padding: 10px 10px 40px; gap: 10px; }

  /* Page banner */
  .page-banner { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  .page-banner-icon { font-size: 22px; }
  .page-banner-text h2 { font-size: 15px; }
  .page-banner-text p { font-size: 11px; }

  /* Layout grids — single column */
  .two-col, .three-col, .portal-layout, .forum-layout { grid-template-columns: 1fr; }

  /* App grid v1 */
  .app-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }

  /* App grid v2 */
  .app-grid2 { grid-template-columns: 1fr; }
  .app-card2 { grid-template-columns: 44px 1fr auto; gap: 10px; }
  .app-card2-icon { width: 44px; height: 44px; border-radius: 10px; }

  /* News rows */
  .news-thumb { width: 60px; }
  .news-body { padding: 10px 12px; }
  .news-title { font-size: 13px; }
  .news-desc { display: none; }
  .news-meta { flex-wrap: wrap; gap: 6px; }

  /* Forum stats bar */
  .fstats-bar { grid-template-columns: 1fr 1fr; }
  .fstats-val { font-size: 20px; }
  .fstats-cell { padding: 10px 12px; }

  /* Latest posts */
  .lp-grid { grid-template-columns: 1fr; }
  .lp-col:first-child { border-right: none; border-bottom: 1px solid var(--border2); }

  /* App filter tabs — scroll */
  .app-filter-tabs {
    justify-content: flex-start; overflow-x: auto;
    scrollbar-width: none; padding: 8px 10px;
  }
  .app-filter-tabs::-webkit-scrollbar { display: none; }
  .app-tab { flex-shrink: 0; }

  /* Section cards */
  .sec-head-title { font-size: 11px; }

  /* Plans grid */
  .plans-grid { grid-template-columns: 1fr !important; }

  /* UCP/ACP */
  .cp-layout { grid-template-columns: 1fr !important; }
  .cp-nav {
    display: flex; overflow-x: auto; scrollbar-width: none;
    border-right: none; border-bottom: 2px solid var(--border);
    flex-direction: row; padding: 6px 8px; gap: 4px;
    min-width: unset; width: 100%; max-height: none;
  }
  .cp-nav::-webkit-scrollbar { display: none; }
  .cp-nav-item { white-space: nowrap; flex-shrink: 0; border-radius: 3px; border: 1px solid var(--border); }
  .cp-nav-item.active { border-color: var(--orange); }
  .cp-form-row { grid-template-columns: 1fr !important; }

  /* ACP tables — scroll */
  .acp-table { min-width: 520px; }
  .cp-card { overflow-x: auto; }
  .acp-stats-grid { grid-template-columns: repeat(2,1fr) !important; }

  /* Popup overlays — bottom sheet */
  #vouch-popup-overlay,
  #rep-popup-overlay,
  #achiev-popup-overlay {
    display: none;
    align-items: flex-end !important;
    justify-content: center;
    padding: 0 !important;
  }
  #vouch-popup-overlay.open,
  #rep-popup-overlay.open,
  #achiev-popup-overlay.open { display: flex !important; }
  #vouch-popup-overlay .cp-shell,
  #rep-popup-overlay .cp-shell,
  #achiev-popup-overlay .cp-shell {
    position: relative !important;
    bottom: auto !important; left: auto !important;
    right: auto !important; top: auto !important;
    width: 100% !important; max-width: 100% !important;
    max-height: 88vh !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 0 !important; margin: 0 !important;
  }

  /* Vouch/rep popup inner grids */
  #vouch-popup-overlay [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  #vouch-popup-overlay [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  #rep-popup-overlay [style*="grid-template-columns:1fr auto"] { grid-template-columns: 1fr !important; }
  #rep-popup-overlay [style*="min-width:140px"] { min-width: unset !important; border-top: 1px solid var(--border2); padding-top: 12px; margin-top: 8px; }

  /* Touch targets */
  .app-sign-btn, .plan-btn, .cp-btn { min-height: 40px; }
  .app-tab { padding: 8px 14px !important; min-height: 36px; }
  .tab-item, .prof-tab, .dylib-tab { min-height: 40px; }
  .faq-q { padding: 14px 12px; }

  /* Profile page */
  #v-profile .profile-grid { grid-template-columns: 1fr !important; }
  #v-profile .ipa-grid { grid-template-columns: 1fr !important; }
  #v-profile .stats-big-grid { grid-template-columns: 1fr 1fr !important; }
  #v-profile .friends-grid { grid-template-columns: repeat(3,1fr) !important; }
  #v-profile .quick-stats-bar { grid-template-columns: repeat(3,1fr) !important; }
  .achiev-grid { grid-template-columns: repeat(6,1fr) !important; }

  /* Dylib tabbar */
  .dylib-tabbar { overflow-x: auto; scrollbar-width: none; }
  .dylib-tabbar::-webkit-scrollbar { display: none; }
  .dylib-tab { flex-shrink: 0; }

  /* Profile tab bar */
  #v-profile .tab-bar { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  #v-profile .tab-bar::-webkit-scrollbar { display: none; }
  #v-profile .tab-item { white-space: nowrap; flex-shrink: 0; }
}

@media (max-width: 480px) {
  .zs-user-actions a { font-size: 9px; }
  .zs-subnav a { padding: 8px 11px; font-size: 11px; }
  .app-card2 { grid-template-columns: 40px 1fr; }
  .app-card2-dl { display: none; }
  #v-profile .stats-big-grid { grid-template-columns: 1fr !important; }
  #v-profile .friends-grid { grid-template-columns: repeat(2,1fr) !important; }
  #v-profile .quick-stats-bar { grid-template-columns: repeat(2,1fr) !important; }
  .fstats-bar { grid-template-columns: 1fr 1fr; }
  .zs-alert-time { display: none; }
}

/* ── Desktop-only / Mobile-only visibility ── */
.zs-desktop-only { display: block; }
.zs-mobile-header { display: none; }

@media (max-width: 768px) {
  .zs-desktop-only { display: none !important; }

  /* ════ MOBILE HEADER WRAPPER ════ */
  .zs-mobile-header {
    display: block;
    background: var(--mid);
    border-bottom: 2px solid var(--orange);
  }

  /* ── Row 1: MSIGN + nav tabs + icons — all in one bar ── */
  .zs-mob-topbar {
    display: flex; align-items: stretch;
    height: 46px; background: var(--mid);
    border-bottom: 2px solid var(--orange);
    overflow: hidden;
  }
  .zs-mob-logo {
    font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 900;
    letter-spacing: 3px; color: #fff; text-decoration: none;
    display: flex; align-items: center;
    padding: 0 12px; flex-shrink: 0;
    border-right: 1px solid #111;
  }
  /* Scrollable tabs sit between logo and right icons */
  .zs-mob-mainnav {
    display: flex; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex: 1; min-width: 0;
  }
  .zs-mob-mainnav::-webkit-scrollbar { display: none; }
  .zs-mob-mainnav a {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 12px; height: 46px;
    font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600;
    letter-spacing: 0.5px; text-transform: uppercase;
    white-space: nowrap; flex-shrink: 0;
    text-decoration: none; border-right: 1px solid #111;
    transition: background 0.15s;
  }
  .zs-mob-mainnav a:hover, .zs-mob-mainnav a.active { background: rgba(255,255,255,0.05); }
  .zs-mob-mainnav a.portal  { color: var(--cyan); }
  .zs-mob-mainnav a.forum   { color: #a066ff; }
  .zs-mob-mainnav a.credits { color: var(--orange); }
  .zs-mob-mainnav a.upgrade { color: var(--green); }
  .zs-mob-mainnav a.regs    { color: var(--orange); }
  .zs-mob-mainnav a.faq     { color: var(--pink); }

  /* Right side icons: search + hamburger */
  .zs-mob-topbar-right {
    display: flex; align-items: center; flex-shrink: 0;
    border-left: 1px solid #111;
  }
  .zs-mob-search-icon {
    background: transparent; border: none; color: #fff;
    font-size: 16px; cursor: pointer; padding: 0 12px; height: 46px;
    border-right: 1px solid #111;
  }
  .zs-mob-hamburger {
    background: transparent; border: none; color: #fff;
    font-size: 18px; cursor: pointer; padding: 0 12px; height: 46px; line-height: 1;
  }

  /* ── Row 2: Search bar — hidden by default, shown on toggle ── */
  .zs-mob-search {
    display: none;
    border-bottom: 1px solid var(--border2);
  }
  .zs-mob-search.open { display: flex; }
  .zs-mob-search input {
    flex: 1; background: var(--bg); border: none;
    color: #fff; padding: 0 14px; font-size: 13px; height: 40px;
    outline: none; font-family: inherit;
  }
  .zs-mob-search input::placeholder { color: #555; }
  .zs-mob-search button {
    background: var(--orange); border: none; color: #fff;
    padding: 0 16px; height: 40px; cursor: pointer; font-size: 15px;
    flex-shrink: 0;
  }

  /* ── Row 3: Subnav links — no dividers, spaced ── */
  .zs-mob-subnav {
    display: flex; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 4px;
    border-bottom: 1px solid var(--border2);
    background: var(--bg);
  }
  .zs-mob-subnav::-webkit-scrollbar { display: none; }
  .zs-mob-subnav a {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 10px; font-size: 12px; font-weight: 600;
    white-space: nowrap; flex-shrink: 0; color: var(--grey);
    text-decoration: none; transition: color 0.15s;
    font-family: inherit;
  }
  .zs-mob-subnav a:hover { color: #fff; }

  /* ── Row 4: Avatar + name/role (LEFT) + quota (RIGHT) — single horizontal row ── */
  .zs-mob-userband {
    display: flex; align-items: center;
    padding: 10px 14px 6px; gap: 10px;
    background: var(--mid);
  }
  .zs-mob-av {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid var(--orange);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Oswald', sans-serif; font-size: 15px; font-weight: 700;
    color: var(--orange); cursor: pointer;
    background: rgba(255,136,0,0.1);
  }
  .zs-mob-userinfo { display: flex; flex-direction: column; flex-shrink: 0; }
  .zs-mob-username {
    font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 700;
    color: #fff; cursor: pointer; line-height: 1.15;
  }
  .zs-mob-userrole {
    font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase;
  }
  /* Quota pushed to the right */
  .zs-mob-quota-right {
    margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  }
  .zs-mob-quota-labels {
    display: flex; align-items: center; justify-content: space-between;
    width: 130px; font-size: 10px; color: var(--grey);
  }
  .zs-mob-quota-bar {
    width: 130px; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden;
  }
  .zs-mob-quota-fill { height: 100%; background: var(--cyan); border-radius: 2px; }

  /* ── Row 5: Action buttons — single row, full width, equal split ── */
  .zs-mob-actions {
    display: flex; width: 100%;
    border-top: 1px solid var(--border2);
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: var(--mid);
  }
  .zs-mob-actions::-webkit-scrollbar { display: none; }
  .zs-mob-btn {
    flex: 1; min-width: 0;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 10px 8px; white-space: nowrap;
    font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 600;
    letter-spacing: 0.4px; text-transform: uppercase;
    color: var(--grey); text-decoration: none;
    border-right: 1px solid var(--border2);
    background: transparent; transition: all 0.15s;
  }
  .zs-mob-btn:last-child { border-right: none; }
  .zs-mob-btn:hover { color: #fff; background: rgba(255,255,255,0.04); }

  /* + SIGN APP = cyan highlight (matches screenshot) */
  .zs-mob-btn-primary {
    background: rgba(0,204,255,0.12);
    color: var(--cyan) !important;
    border-color: rgba(0,204,255,0.25) !important;
    font-weight: 700;
  }
  .zs-mob-btn-primary:hover { background: rgba(0,204,255,0.2); }

  .zs-mob-btn-orange { color: var(--orange) !important; }
  .zs-mob-btn-red { color: #ff5555 !important; }

  /* Bell + envelope icon buttons with badges */
  .zs-mob-btn-icon {
    flex: 0 0 auto; padding: 10px 14px;
    position: relative;
  }
  .zs-mob-badge-inline {
    position: absolute; top: 5px; right: 3px;
    background: var(--orange); color: #000;
    font-size: 8px; font-weight: 800; padding: 1px 4px;
    border-radius: 8px; line-height: 1.3;
    font-family: 'Oswald', sans-serif;
  }
}
</style>
</head>
<body>

<!-- ════ HEADER (shared) ════ -->

<!-- ── DESKTOP TOPNAV (hidden on mobile) ── -->
<div class="zs-topnav zs-desktop-only">
  <div class="zs-topnav-inner">
    <div class="zs-topnav-links">
        <a href="#" class="portal"  onclick="show('portal',this)">PORTAL</a>
        <a href="#" class="forum"   onclick="show('forum',this)">FORUM</a>
        <a href="#" class="credits" onclick="show('credits',this)">CREDITS</a>
        <a href="#" class="upgrade" onclick="show('upgrade',this)">UPGRADE</a>
        <a href="#" class="regs"    onclick="show('regs',this)">REGULATIONS</a>
        <a href="#" class="faq"     onclick="show('faq',this)">FAQ</a>
    </div>
  </div>
</div>

<!-- ── MOBILE HEADER (hidden on desktop) ── -->
<div class="zs-mobile-header">

  <!-- Row 1: MSIGN logo + scrollable nav tabs + search icon + hamburger -->
  <div class="zs-mob-topbar">
    <span class="zs-mob-logo">MSIGN</span>
    <div class="zs-mob-mainnav">
      <a href="#" class="portal"  onclick="show('portal',this)">PORTAL</a>
      <a href="#" class="forum"   onclick="show('forum',this)">FORUM</a>
      <a href="#" class="credits" onclick="show('credits',this)">CREDITS</a>
      <a href="#" class="upgrade" onclick="show('upgrade',this)">UPGRADE</a>
      <a href="#" class="regs"    onclick="show('regs',this)">REGULATIONS</a>
      <a href="#" class="faq"     onclick="show('faq',this)">FAQ</a>
    </div>
    <div class="zs-mob-topbar-right">
      <button class="zs-mob-search-icon" onclick="toggleMobSearch(this)" title="Search"><i class="fas fa-search"></i></button>
      <button class="zs-mob-hamburger" onclick="toggleMobileMenu(this)"><i class="fas fa-bars"></i></button>
    </div>
  </div>

  <!-- Row 2: Search bar (hidden by default, toggled by search icon) -->
  <div class="zs-mob-search" id="zs-mob-search-bar">
    <input type="text" placeholder="Search MSIGN..." id="zs-mob-search-input" autofocus/>
    <button><i class="fas fa-search"></i></button>
  </div>

  <!-- Row 3: Subnav links (no dividers) -->
  <div class="zs-mob-subnav">
    <a href="#">Search</a>
    <a href="#">Memberlist</a>
    <a href="#">Calendar</a>
    <a href="#" onclick="showPage('pg-submit-ipa')" style="color:var(--green);font-weight:700;"><i class="fas fa-upload" style="font-size:10px;"></i> Submit IPA</a>
    <a href="#" onclick="showPage('pg-apps')" style="color:var(--cyan);"><i class="fas fa-th-large" style="font-size:10px;"></i> App Library</a>
  </div>

  <!-- Row 4: Avatar+name LEFT, quota RIGHT — single horizontal row -->
  <div class="zs-mob-userband" id="mob-userband-loggedin">
    <div class="zs-mob-av" onclick="openProfile('<?php echo $username; ?>','<?php echo $userColor; ?>')" style="border-color:<?php echo $userColor; ?>;color:<?php echo $userColor; ?>;"><?php echo $userAv; ?></div>
    <div class="zs-mob-userinfo">
      <div class="zs-mob-username" onclick="openProfile('<?php echo $username; ?>','<?php echo $userColor; ?>')"><?php echo $username; ?></div>
      <div class="zs-mob-userrole" style="color:<?php echo $userColor; ?>;"><?php echo strtoupper($userTier); ?></div>
    </div>
    <div class="zs-mob-quota-right">
      <div class="zs-mob-quota-labels">
        <span>Signs: <?php echo $signsUsed; ?>/<?php echo $signsMax; ?></span>
        <span>Resets in 24h</span>
      </div>
      <div class="zs-mob-quota-bar"><div class="zs-mob-quota-fill" style="width:<?php echo $quotaPct; ?>%;"></div></div>
    </div>
  </div>

  <!-- Row 4 (guest): Login / Register buttons -->
  <div id="mob-userband-guest" style="padding:8px 10px;gap:8px;flex-direction:row;">
    <button onclick="openModal('modal-login')" style="flex:1;background:var(--orange);color:#000;border:none;padding:9px;font-family:'Oswald',sans-serif;font-size:12px;font-weight:700;letter-spacing:.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;"><i class="fas fa-sign-in-alt"></i> SIGN IN</button>
    <button onclick="openModal('modal-register')" style="flex:1;background:transparent;color:var(--green);border:1px solid rgba(0,204,85,.4);padding:9px;font-family:'Oswald',sans-serif;font-size:12px;font-weight:700;letter-spacing:.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;"><i class="fas fa-user-plus"></i> REGISTER</button>
  </div>

  <!-- Row 5: Action buttons — single full-width row -->
  <div class="zs-mob-actions">
    <a href="#" onclick="showPage('pg-library')" class="zs-mob-btn">MY LIBRARY</a>
    <a href="#" onclick="showPage('pg-sign')" class="zs-mob-btn zs-mob-btn-primary">+ SIGN APP</a>
    <a href="#" onclick="openUCP()" class="zs-mob-btn zs-mob-btn-orange"><i class="fas fa-user-cog" style="font-size:9px;"></i> USER CP</a>
    <?php if ($isAdmin): ?>
    <a href="#" onclick="openACP()" class="zs-mob-btn zs-mob-btn-red"><i class="fas fa-shield-alt" style="font-size:9px;"></i> ADMIN CP</a>
    <?php endif; ?>
    <a href="#" onclick="toggleNotifDropdown(this)" class="zs-mob-btn zs-mob-btn-icon">
      <i class="fas fa-bell"></i>
      <?php if ($notifCount > 0): ?><span class="zs-mob-badge-inline"><?php echo $notifCount; ?></span><?php endif; ?>
    </a>
    <a href="#" onclick="event.preventDefault();openPMPanel();" class="zs-mob-btn zs-mob-btn-icon">
      <i class="fas fa-envelope"></i>
      <?php if ($pmCount > 0): ?><span class="zs-mob-badge-inline" style="background:var(--cyan);color:#000;"><?php echo $pmCount; ?></span><?php endif; ?>
    </a>
  </div>

</div>

<!-- ── DESKTOP SUBNAV (hidden on mobile) ── -->
<div class="zs-subnav zs-desktop-only">
  <div class="zs-subnav-inner">
    <a href="#">Search</a>
    <a href="#">Memberlist</a>
    <a href="#">Calendar</a>
    <a href="#" onclick="showPage('pg-submit-ipa')" style="color:var(--green);font-weight:700;"><i class="fas fa-upload" style="font-size:10px;margin-right:3px;"></i> Submit IPA</a>
    <a href="#" onclick="showPage('pg-apps')" style="color:var(--cyan);"><i class="fas fa-th-large" style="font-size:10px;margin-right:3px;"></i> App Library</a>
  </div>
</div>

<!-- ── DESKTOP HEADER BAND (hidden on mobile) ── -->
<div class="zs-header-band zs-desktop-only">
  <div class="zs-header-band-inner">
    <a href="#" class="zs-logo-box" onclick="show('portal',document.querySelector('.portal'))">
        <div class="zs-logo-text">MSIGN</div>
        <div class="zs-logo-sub">UNIQUE SIGNING PORTAL</div>
    </a>
    <div class="zs-staff-picks-bar" id="hdr-staff-picks">
        <div class="zs-staff-pick-label">
            <i class="fas fa-star"></i>
            <span>Staff Picks</span>
        </div>
        <div class="zs-hdr-picks-grid">
            <div class="zs-hdr-pick-card" id="hdr-pick-0">
                <div class="zs-hdr-pick-ico" style="background:var(--border);animation:pulse 1.5s infinite;"></div>
                <div style="height:8px;background:var(--border);border-radius:3px;width:75%;margin-bottom:4px;animation:pulse 1.5s infinite;"></div>
                <div style="height:7px;background:var(--border);border-radius:3px;width:50%;margin-bottom:6px;animation:pulse 1.5s infinite;"></div>
                <div style="display:flex;gap:3px;justify-content:center;"><div style="height:13px;width:35px;background:var(--border);border-radius:2px;animation:pulse 1.5s infinite;"></div><div style="height:13px;width:28px;background:var(--border);border-radius:2px;animation:pulse 1.5s infinite;"></div></div>
            </div>
            <div class="zs-hdr-pick-card" id="hdr-pick-1">
                <div class="zs-hdr-pick-ico" style="background:var(--border);animation:pulse 1.5s infinite;"></div>
                <div style="height:8px;background:var(--border);border-radius:3px;width:75%;margin-bottom:4px;animation:pulse 1.5s infinite;"></div>
                <div style="height:7px;background:var(--border);border-radius:3px;width:50%;margin-bottom:6px;animation:pulse 1.5s infinite;"></div>
                <div style="display:flex;gap:3px;justify-content:center;"><div style="height:13px;width:35px;background:var(--border);border-radius:2px;animation:pulse 1.5s infinite;"></div><div style="height:13px;width:28px;background:var(--border);border-radius:2px;animation:pulse 1.5s infinite;"></div></div>
            </div>
        </div>
    </div>
    <!-- Desktop user panel -->
    <div id="desk-user-panel" class="zs-user-panel">
        <div class="zs-user-top">
            <div class="zs-user-av" style="border-color:<?php echo $userColor; ?>;color:<?php echo $userColor; ?>;cursor:pointer;" onclick="openProfile('<?php echo $username; ?>','<?php echo $userColor; ?>')"><?php echo $userAv; ?></div>
            <div>
                <div class="zs-user-name" style="cursor:pointer;" onclick="openProfile('<?php echo $username; ?>','<?php echo $userColor; ?>')"><?php echo $username; ?></div>
                <div class="zs-user-tier" style="color:<?php echo $userColor; ?>;"><?php echo $userTier; ?></div>
            </div>
        </div>
        <div class="zs-user-quota">
            <span>Signs: <?php echo $signsUsed; ?>/<?php echo $signsMax; ?></span>
            <div class="zs-quota-bar"><div class="zs-quota-fill<?php echo $quotaPct >= 80 ? ' warn' : ''; ?>" style="width:<?php echo $quotaPct; ?>%;"></div></div>
            <span>Resets in 24h</span>
        </div>
        <div class="zs-user-actions">
            <a href="#" onclick="showPage('pg-library')">My Library</a>
            <a href="#" onclick="showPage('pg-sign')" class="primary">+ Sign App</a>
        </div>
        <div class="zs-user-actions" style="margin-top:4px;">
            <a href="#" onclick="openUCP()" style="border-color:rgba(255,136,0,0.4);color:var(--orange);"><i class="fas fa-user-cog" style="margin-right:4px;font-size:9px;"></i>User CP</a>
            <?php if ($isAdmin): ?>
            <a href="#" onclick="openACP()" style="border-color:rgba(255,51,51,0.4);color:#ff5555;"><i class="fas fa-shield-alt" style="margin-right:4px;font-size:9px;"></i>Admin CP</a>
            <?php endif; ?>
        </div>
        <div class="zs-user-actions" style="margin-top:4px;">
            <a href="#" onclick="doLogout()" style="border-color:rgba(85,85,85,0.4);color:var(--dim);font-size:10px;" onmouseover="this.style.borderColor='rgba(204,0,0,.4)';this.style.color='#ff5555'" onmouseout="this.style.borderColor='rgba(85,85,85,0.4)';this.style.color='var(--dim)'"><i class="fas fa-sign-out-alt" style="margin-right:4px;font-size:9px;"></i>Sign Out</a>
        </div>
        <div style="display:flex;gap:5px;margin-top:3px;">
            <div style="position:relative;flex:1;" id="notif-btn-wrap">
                <a href="#" onclick="toggleNotifDropdown(this)" style="display:flex;align-items:center;justify-content:center;gap:5px;padding:4px 0;font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;border:1px solid var(--border);color:var(--grey);text-decoration:none;transition:all 0.15s;position:relative;" onmouseover="this.style.borderColor='var(--orange)';this.style.color='var(--orange)'" onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--grey)'">
                    <i class="fas fa-bell"></i>
                    <?php if ($notifCount > 0): ?><span style="position:absolute;top:-5px;right:-4px;background:var(--orange);color:#000;font-size:8px;font-weight:700;padding:1px 4px;border-radius:8px;line-height:1.2;"><?php echo $notifCount; ?></span><?php endif; ?>
                </a>
            </div>
            <a href="#" onclick="event.preventDefault();openPMPanel();" style="flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:4px 0;font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;border:1px solid var(--border);color:var(--grey);text-decoration:none;transition:all 0.15s;position:relative;" onmouseover="this.style.borderColor='var(--cyan)';this.style.color='var(--cyan)'" onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--grey)'">
                <i class="fas fa-envelope"></i>
                <?php if ($pmCount > 0): ?><span style="position:absolute;top:-5px;right:-4px;background:var(--orange);color:#000;font-size:8px;font-weight:700;padding:1px 4px;border-radius:8px;line-height:1.2;"><?php echo $pmCount; ?></span><?php endif; ?>
            </a>
        </div>
    </div>

    <!-- Desktop GUEST panel (shown when logged out) -->
    <div id="desk-guest-panel" class="zs-user-panel" style="display:none;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:18px 14px;">
      <div style="text-align:center;margin-bottom:4px;">
        <div style="width:48px;height:48px;border-radius:50%;background:rgba(255,136,0,.08);border:2px solid rgba(255,136,0,.3);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:20px;color:rgba(255,136,0,.4);"><i class="fas fa-user-lock"></i></div>
        <div style="font-family:'Oswald',sans-serif;font-size:13px;font-weight:700;color:var(--white);letter-spacing:.5px;margin-bottom:3px;">GUEST</div>
        <div style="font-size:11px;color:var(--dim);">Sign in to access your portal</div>
      </div>
      <button class="zs-btn primary" style="width:100%;justify-content:center;padding:9px;font-size:13px;" onclick="openModal('modal-login')"><i class="fas fa-sign-in-alt"></i> SIGN IN</button>
      <button class="zs-btn" style="width:100%;justify-content:center;padding:9px;font-size:13px;background:transparent;border:1px solid rgba(0,204,85,.4);color:var(--green);" onclick="openModal('modal-register')"><i class="fas fa-user-plus"></i> CREATE ACCOUNT</button>
      <div style="font-size:10px;color:var(--dim);text-align:center;line-height:1.5;">Free to join · Instant access</div>
    </div>

  </div>
</div>

<!-- ══════════════════════════════════════════════
     PORTAL PAGE
══════════════════════════════════════════════ -->
<div id="pg-portal" class="page-wrap active">

    <div class="portal-layout">
        <!-- ── MAIN COLUMN ── -->
        <div style="display:flex;flex-direction:column;gap:16px;min-width:0;">

            <!-- LATEST NEWS -->
            <div class="sec-card">
                <div class="sec-head">
                    <div class="sec-head-title"><i class="fas fa-newspaper"></i> Latest News</div>
                    <a href="#" onclick="showPage('pg-allnews')" style="font-size:11px;color:var(--dim);font-family:'Oswald',sans-serif;letter-spacing:0.5px;text-transform:uppercase;">All News →</a>
                </div>

                <!-- News row 1 — populated dynamically from DB -->
                <div style="padding:24px;text-align:center;color:var(--dim);font-size:13px;">
                    <i class="fas fa-newspaper" style="font-size:28px;margin-bottom:10px;display:block;opacity:0.3;"></i>
                    No news posts yet. Be the first to post!
                </div>
            </div>

            <!-- LATEST APPS -->
            <div class="sec-card">
                <div class="sec-head">
                    <div class="sec-head-title"><i class="fas fa-th-large"></i> Latest Apps</div>
                    <a href="#" onclick="showPage('pg-apps')" style="font-size:11px;color:var(--dim);font-family:'Oswald',sans-serif;letter-spacing:0.5px;text-transform:uppercase;">Browse All →</a>
                </div>
                <!-- Filter tabs -->
                <div class="app-filter-tabs" id="portal-cat-tabs">
                    <div class="app-tab active" onclick="setTab(this);filterPortalApps('all')"><i class="fas fa-th-large"></i> ALL</div>
                    <div class="app-tab" onclick="setTab(this);filterPortalApps('tools')"><i class="fas fa-tools"></i> TOOLS</div>
                    <div class="app-tab" onclick="setTab(this);filterPortalApps('media')"><i class="fas fa-photo-video"></i> MEDiA</div>
                    <div class="app-tab" onclick="setTab(this);filterPortalApps('social')"><i class="fas fa-users"></i> SOCiAL</div>
                    <div class="app-tab" onclick="setTab(this);filterPortalApps('jailbreak')"><i class="fas fa-lock"></i> JAiLBREAK</div>
                    <div class="app-tab" onclick="setTab(this);filterPortalApps('car')"><i class="fas fa-car"></i> CAR</div>
                    <div class="app-tab" onclick="setTab(this);filterPortalApps('emu')"><i class="fas fa-gamepad"></i> EMU</div>
                </div>

                <!-- ★ Staff Picks Banner -->
                <div id="staff-picks-wrap" style="margin:0;border-bottom:1px solid var(--border2);">
                    <div style="padding:6px 14px 5px;display:flex;align-items:center;gap:7px;background:rgba(255,204,0,0.04);border-bottom:1px solid var(--border2);">
                        <i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i>
                        <span style="font-family:'Oswald',sans-serif;font-size:9px;font-weight:700;color:var(--yellow);letter-spacing:2px;text-transform:uppercase;">Staff Picks</span>
                        <span style="font-size:10px;color:var(--dim);margin-left:2px;">— Handpicked by our team</span>
                    </div>
                    <div id="staff-picks-grid">
                        <!-- Skeleton — filled by JS -->
                        <div style="display:flex;flex-direction:column;align-items:center;padding:12px 10px;border-right:1px solid var(--border2);">
                            <div style="width:52px;height:52px;border-radius:12px;background:var(--border);margin-bottom:8px;animation:pulse 1.5s infinite;"></div>
                            <div style="height:8px;background:var(--border);border-radius:3px;width:80%;margin-bottom:5px;animation:pulse 1.5s infinite;"></div>
                            <div style="height:7px;background:var(--border);border-radius:3px;width:55%;margin-bottom:8px;animation:pulse 1.5s infinite;"></div>
                            <div style="display:flex;gap:4px;"><div style="height:14px;width:40px;background:var(--border);border-radius:2px;animation:pulse 1.5s infinite;"></div><div style="height:14px;width:30px;background:var(--border);border-radius:2px;animation:pulse 1.5s infinite;"></div></div>
                        </div>
                        <div style="display:flex;flex-direction:column;align-items:center;padding:12px 10px;">
                            <div style="width:52px;height:52px;border-radius:12px;background:var(--border);margin-bottom:8px;animation:pulse 1.5s infinite;"></div>
                            <div style="height:8px;background:var(--border);border-radius:3px;width:80%;margin-bottom:5px;animation:pulse 1.5s infinite;"></div>
                            <div style="height:7px;background:var(--border);border-radius:3px;width:55%;margin-bottom:8px;animation:pulse 1.5s infinite;"></div>
                            <div style="display:flex;gap:4px;"><div style="height:14px;width:40px;background:var(--border);border-radius:2px;animation:pulse 1.5s infinite;"></div><div style="height:14px;width:30px;background:var(--border);border-radius:2px;animation:pulse 1.5s infinite;"></div></div>
                        </div>
                    </div>
                </div>

                <!-- Live app grid from delvek.net -->
                <div class="app-grid2" id="portal-app-grid">
                    <!-- Loading skeletons -->
                    <div class="app-card2 skeleton-card"><div class="app-card2-icon" style="background:var(--border);animation:pulse 1.5s infinite;"></div><div class="app-card2-info"><div style="height:11px;background:var(--border);border-radius:3px;margin-bottom:5px;width:80%;animation:pulse 1.5s infinite;"></div><div style="height:9px;background:var(--border);border-radius:3px;width:55%;animation:pulse 1.5s infinite;"></div></div></div>
                    <div class="app-card2 skeleton-card"><div class="app-card2-icon" style="background:var(--border);animation:pulse 1.5s infinite;"></div><div class="app-card2-info"><div style="height:11px;background:var(--border);border-radius:3px;margin-bottom:5px;width:80%;animation:pulse 1.5s infinite;"></div><div style="height:9px;background:var(--border);border-radius:3px;width:55%;animation:pulse 1.5s infinite;"></div></div></div>
                    <div class="app-card2 skeleton-card"><div class="app-card2-icon" style="background:var(--border);animation:pulse 1.5s infinite;"></div><div class="app-card2-info"><div style="height:11px;background:var(--border);border-radius:3px;margin-bottom:5px;width:80%;animation:pulse 1.5s infinite;"></div><div style="height:9px;background:var(--border);border-radius:3px;width:55%;animation:pulse 1.5s infinite;"></div></div></div>
                    <div class="app-card2 skeleton-card"><div class="app-card2-icon" style="background:var(--border);animation:pulse 1.5s infinite;"></div><div class="app-card2-info"><div style="height:11px;background:var(--border);border-radius:3px;margin-bottom:5px;width:80%;animation:pulse 1.5s infinite;"></div><div style="height:9px;background:var(--border);border-radius:3px;width:55%;animation:pulse 1.5s infinite;"></div></div></div>
                    <div class="app-card2 skeleton-card"><div class="app-card2-icon" style="background:var(--border);animation:pulse 1.5s infinite;"></div><div class="app-card2-info"><div style="height:11px;background:var(--border);border-radius:3px;margin-bottom:5px;width:80%;animation:pulse 1.5s infinite;"></div><div style="height:9px;background:var(--border);border-radius:3px;width:55%;animation:pulse 1.5s infinite;"></div></div></div>
                    <div class="app-card2 skeleton-card"><div class="app-card2-icon" style="background:var(--border);animation:pulse 1.5s infinite;"></div><div class="app-card2-info"><div style="height:11px;background:var(--border);border-radius:3px;margin-bottom:5px;width:80%;animation:pulse 1.5s infinite;"></div><div style="height:9px;background:var(--border);border-radius:3px;width:55%;animation:pulse 1.5s infinite;"></div></div></div>
                </div>
            </div>

            <!-- FORUM STATS BAR -->
            <div class="sec-card">
                <div class="sec-head orange">
                    <div class="sec-head-title"><i class="fas fa-chart-bar"></i> Forum Stats</div>
                </div>
                <div class="fstats-bar">
                    <div class="fstats-cell">
                        <div class="fstats-label">TOTAL THREADS</div>
                        <div class="fstats-val cyan" id="stat-threads">0</div>
                    </div>
                    <div class="fstats-cell">
                        <div class="fstats-label">TOTAL POSTS</div>
                        <div class="fstats-val cyan" id="stat-posts">0</div>
                    </div>
                    <div class="fstats-cell">
                        <div class="fstats-label">MEMBERS</div>
                        <div class="fstats-val cyan" id="stat-members">0</div>
                    </div>
                    <div class="fstats-cell" style="border-right:none;">
                        <div class="fstats-label">ONLINE NOW</div>
                        <div class="fstats-val green" id="stat-online">0</div>
                    </div>
                </div>
            </div>

            <!-- LATEST POSTS -->
            <div class="sec-card">
                <div class="sec-head">
                    <div class="sec-head-title"><i class="fas fa-comments"></i> Latest Posts</div>
                </div>
                <div style="padding:20px;text-align:center;color:var(--dim);font-size:13px;">
                    <i class="fas fa-comments" style="font-size:24px;margin-bottom:8px;display:block;opacity:0.3;"></i>
                    No posts yet.
                </div>
            </div>

        </div>

        <!-- ── RIGHT SIDEBAR ── -->
        <div class="portal-sidebar">

            <!-- Trending -->
            <div class="sec-card">
                <div class="sec-head">
                    <div class="sec-head-title"><i class="fas fa-fire"></i> Trending Today</div>
                </div>
                <div style="padding:20px;text-align:center;color:var(--dim);font-size:12px;">
                    <i class="fas fa-fire" style="font-size:22px;margin-bottom:8px;display:block;opacity:0.25;"></i>
                    No apps trending yet.
                </div>
            </div>

            <!-- Recent Activity -->
            <div class="sec-card">
                <div class="sec-head">
                    <div class="sec-head-title"><i class="fas fa-clock"></i> Recent Activity</div>
                </div>
                <div style="padding:18px;text-align:center;color:var(--dim);font-size:12px;">
                    <i class="fas fa-clock" style="font-size:22px;margin-bottom:8px;display:block;opacity:0.25;"></i>
                    No activity yet.
                </div>
            </div>

            <!-- Online Now -->
            <div class="sec-card">
                <div class="sec-head">
                    <div class="sec-head-title"><i class="fas fa-circle" style="color:var(--green);font-size:8px;"></i> Online Now</div>
                    <div class="sec-head-meta" id="online-count">0 users</div>
                </div>
                <div class="online-list" id="online-list-wrap">
                    <div style="padding:10px;color:var(--dim);font-size:11px;">No users online.</div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- ══════════════════════════════════════════════
     FORUM PAGE
══════════════════════════════════════════════ -->
<div id="pg-forum-shell" style="display:none;">
<div class="wrap">
<!-- VIEW 1 — FORUM CATEGORY INDEX
═══════════════════════════════════════════════════ -->
<div id="v-category" class="forum-view active">
<div class="wrap">

  <!-- Breadcrumb -->
  <div class="breadcrumb">
    <a href="#">MSIGN.PARTY</a>
    <i class="fas fa-chevron-right"></i>
    <span style="color:var(--white);">Forum Index</span>
  </div>

  <!-- Announcement -->
  <div class="forum-announce">
    <i class="fas fa-bullhorn"></i>
    <div style="flex:1;font-size:12px;color:var(--grey);">
      <strong style="color:var(--purple);">📌 WELCOME:</strong> MSIGN.PARTY forum is now open. No announcements yet — check back soon.
    </div>
  </div>

  <div class="forum-layout">
    <div>

      <!-- ── STAFF ANNOUNCEMENTS ── -->
      <div class="sec-card">
        <div class="sec-head">
          <div class="sec-head-title"><i class="fas fa-bullhorn"></i> Staff Announcements</div>
          <div class="sec-head-meta">READ ONLY</div>
        </div>
        <div class="board-row" onclick="showView('v-threads')">
          <div class="board-unread"></div>
          <div class="board-icon purple"><i class="fas fa-star"></i></div>
          <div class="board-info">
            <div class="board-name">News & Updates</div>
            <div class="board-desc">Official MSIGN announcements, changelog, and server status</div>
          </div>
          <div class="board-stats">
            <div><div class="bs-num">0</div><div class="bs-lbl">Threads</div></div>
            <div><div class="bs-num">0</div><div class="bs-lbl">Posts</div></div>
          </div>
          <div class="board-last">
            <div class="board-last-title" onclick="showView('v-posts')">No posts yet</div>
            <div class="board-last-meta" style="color:var(--dim);">—</div>
          </div>
        </div>
        <div class="board-row">
          <div class="board-read"></div>
          <div class="board-icon purple"><i class="fas fa-wrench"></i></div>
          <div class="board-info">
            <div class="board-name">Maintenance & Downtime</div>
            <div class="board-desc">Planned outages and infrastructure updates</div>
          </div>
          <div class="board-stats">
            <div><div class="bs-num">0</div><div class="bs-lbl">Threads</div></div>
            <div><div class="bs-num">0</div><div class="bs-lbl">Posts</div></div>
          </div>
          <div class="board-last">
            <div class="board-last-title">No posts yet</div>
            <div class="board-last-meta" style="color:var(--dim);">—</div>
          </div>
        </div>
      </div>

      <!-- ── SIGNING & APPS ── -->
      <div class="sec-card">
        <div class="sec-head cyan">
          <div class="sec-head-title"><i class="fas fa-pen-nib"></i> Signing & Apps</div>
          <div class="sec-head-meta">Most Active</div>
        </div>
        <div class="board-cat-header"><div class="board-cat-name">🗂 Releases</div></div>
        <div class="board-row" onclick="showView('v-threads')">
          <div class="board-unread"></div>
          <div class="board-icon cyan"><i class="fas fa-box-open"></i></div>
          <div class="board-info">
            <div class="board-name">IPA Releases</div>
            <div class="board-desc">Upload and share new signed IPAs with the community</div>
          </div>
          <div class="board-stats">
            <div><div class="bs-num" style="color:var(--cyan);">0</div><div class="bs-lbl">Threads</div></div>
            <div><div class="bs-num">0</div><div class="bs-lbl">Posts</div></div>
          </div>
          <div class="board-last">
            <div class="board-last-title">No posts yet</div>
            <div class="board-last-meta" style="color:var(--dim);">—</div>
          </div>
        </div>
        <div class="board-row">
          <div class="board-read"></div>
          <div class="board-icon cyan"><i class="fas fa-code"></i></div>
          <div class="board-info">
            <div class="board-name">Tweaks & Dylibs</div>
            <div class="board-desc">Discuss and share tweak injections and dylib packages</div>
          </div>
          <div class="board-stats">
            <div><div class="bs-num">0</div><div class="bs-lbl">Threads</div></div>
            <div><div class="bs-num">0</div><div class="bs-lbl">Posts</div></div>
          </div>
          <div class="board-last">
            <div class="board-last-title">No posts yet</div>
            <div class="board-last-meta" style="color:var(--dim);">—</div>
          </div>
        </div>
        <div class="board-cat-header"><div class="board-cat-name">🛟 Help</div></div>
        <div class="board-row">
          <div class="board-unread"></div>
          <div class="board-icon cyan"><i class="fas fa-life-ring"></i></div>
          <div class="board-info">
            <div class="board-name">Support & Help</div>
            <div class="board-desc">Installation issues, signing errors, general questions</div>
          </div>
          <div class="board-stats">
            <div><div class="bs-num">0</div><div class="bs-lbl">Threads</div></div>
            <div><div class="bs-num">0</div><div class="bs-lbl">Posts</div></div>
          </div>
          <div class="board-last">
            <div class="board-last-title">No posts yet</div>
            <div class="board-last-meta" style="color:var(--dim);">—</div>
          </div>
        </div>
        <div class="board-row">
          <div class="board-read"></div>
          <div class="board-icon cyan"><i class="fas fa-file-upload"></i></div>
          <div class="board-info">
            <div class="board-name">IPA Requests</div>
            <div class="board-desc">Request apps you want added to the library</div>
          </div>
          <div class="board-stats">
            <div><div class="bs-num">0</div><div class="bs-lbl">Threads</div></div>
            <div><div class="bs-num">0</div><div class="bs-lbl">Posts</div></div>
          </div>
          <div class="board-last">
            <div class="board-last-title">No posts yet</div>
            <div class="board-last-meta" style="color:var(--dim);">—</div>
          </div>
        </div>
      </div>

      <!-- ── COMMUNITY ── -->
      <div class="sec-card">
        <div class="sec-head orange">
          <div class="sec-head-title"><i class="fas fa-users"></i> Community</div>
        </div>
        <div class="board-row">
          <div class="board-unread"></div>
          <div class="board-icon orange"><i class="fas fa-comments"></i></div>
          <div class="board-info">
            <div class="board-name">General Discussion</div>
            <div class="board-desc">Off-topic chat, introductions, and community hangout</div>
          </div>
          <div class="board-stats">
            <div><div class="bs-num">0</div><div class="bs-lbl">Threads</div></div>
            <div><div class="bs-num">0</div><div class="bs-lbl">Posts</div></div>
          </div>
          <div class="board-last">
            <div class="board-last-title">No posts yet</div>
            <div class="board-last-meta" style="color:var(--dim);">—</div>
          </div>
        </div>
        <div class="board-row">
          <div class="board-read"></div>
          <div class="board-icon yellow"><i class="fas fa-trophy"></i></div>
          <div class="board-info">
            <div class="board-name">Showcases & Reviews</div>
            <div class="board-desc">Show off your setups, themes, tweaks, and app reviews</div>
          </div>
          <div class="board-stats">
            <div><div class="bs-num">0</div><div class="bs-lbl">Threads</div></div>
            <div><div class="bs-num">0</div><div class="bs-lbl">Posts</div></div>
          </div>
          <div class="board-last">
            <div class="board-last-title">No posts yet</div>
            <div class="board-last-meta" style="color:var(--dim);">—</div>
          </div>
        </div>
        <div class="board-row">
          <div class="board-read"></div>
          <div class="board-icon green"><i class="fas fa-flask"></i></div>
          <div class="board-info">
            <div class="board-name">Dev Corner</div>
            <div class="board-desc">Development talk, reverse engineering, jailbreak discussion</div>
          </div>
          <div class="board-stats">
            <div><div class="bs-num">0</div><div class="bs-lbl">Threads</div></div>
            <div><div class="bs-num">0</div><div class="bs-lbl">Posts</div></div>
          </div>
          <div class="board-last">
            <div class="board-last-title">No posts yet</div>
            <div class="board-last-meta" style="color:var(--dim);">—</div>
          </div>
        </div>
      </div>

    </div><!-- /main col -->

    <!-- SIDEBAR -->
    <div style="display:flex;flex-direction:column;gap:16px;">

      <div class="sec-card">
        <div class="sec-head"><div class="sec-head-title"><i class="fas fa-chart-bar"></i> Forum Stats</div></div>
        <div class="fstat-row"><div class="fstat-label">Total Threads</div><div class="fstat-val">0</div></div>
        <div class="fstat-row"><div class="fstat-label">Total Posts</div><div class="fstat-val">0</div></div>
        <div class="fstat-row"><div class="fstat-label">Registered Users</div><div class="fstat-val">0</div></div>
        <div class="fstat-row"><div class="fstat-label">Newest Member</div><div class="fstat-val" style="color:var(--green);">—</div></div>
        <div class="fstat-row"><div class="fstat-label">Most Online Ever</div><div class="fstat-val">0</div></div>
      </div>

      <div class="sec-card">
        <div class="sec-head">
          <div class="sec-head-title"><i class="fas fa-signal"></i> Who's Online</div>
          <div class="sec-head-meta">0 users</div>
        </div>
        <div style="padding:12px;font-size:11px;color:var(--dim);">No users currently online.</div>
      </div>

      <div class="sec-card">
        <div class="sec-head"><div class="sec-head-title"><i class="fas fa-medal"></i> Top Posters</div></div>
        <div class="fstat-row"><div class="fstat-label" style="color:var(--yellow);">🥇 —</div><div class="fstat-val">0</div></div>
        <div class="fstat-row"><div class="fstat-label" style="color:#aaa;">🥈 —</div><div class="fstat-val">0</div></div>
        <div class="fstat-row"><div class="fstat-label" style="color:var(--orange);">🥉 —</div><div class="fstat-val">0</div></div>
        <div class="fstat-row"><div class="fstat-label">—</div><div class="fstat-val">0</div></div>
        <div class="fstat-row"><div class="fstat-label">—</div><div class="fstat-val">0</div></div>
      </div>

    </div><!-- /sidebar -->
  </div>

</div><!-- /wrap -->
</div><!-- /v-category -->

<!-- ═══════════════════════════════════════════════════
     VIEW 2 — THREAD LIST
═══════════════════════════════════════════════════ -->
<div id="v-threads" class="forum-view">
<div class="wrap">

  <div class="breadcrumb">
    <a href="#" onclick="showView('v-category')">MSIGN.PARTY</a>
    <i class="fas fa-chevron-right"></i>
    <a href="#" onclick="showView('v-category')">Forum Index</a>
    <i class="fas fa-chevron-right"></i>
    <span style="color:var(--white);">IPA Releases</span>
  </div>

  <div class="thread-layout">
    <div>
      <div class="sec-card">
        <div class="sec-head cyan">
          <div class="sec-head-title"><i class="fas fa-box-open"></i> IPA Releases</div>
          <div class="sec-head-meta">0 threads · 0 posts</div>
        </div>

        <!-- Controls -->
        <div class="thread-controls">
          <div class="thread-controls-left">
            <button class="tc-btn primary" onclick="showView('v-posts')"><i class="fas fa-plus"></i> New Thread</button>
            <button class="tc-btn"><i class="fas fa-search"></i> Search</button>
            <button class="tc-btn"><i class="fas fa-check-double"></i> Mark All Read</button>
          </div>
          <div style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);">
            Sort by:
            <select style="background:var(--card2);border:1px solid var(--border);color:var(--grey);padding:4px 8px;font-size:11px;outline:none;">
              <option>Last Post</option><option>Thread Date</option><option>Replies</option><option>Views</option>
            </select>
          </div>
        </div>

        <!-- Pinned threads -->
        <div style="padding:4px 14px;background:rgba(255,204,0,0.03);border-bottom:1px solid var(--border2);">
          <span style="font-size:9px;font-family:'Oswald',sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--dim);">📌 Pinned</span>
        </div>
        <div class="thread-row" onclick="showView('v-posts')">
          <div class="t-type pinned"><i class="fas fa-thumbtack"></i></div>
          <div class="t-info">
            <div class="t-title">📋 IPA Release Template — Read Before Posting <span class="t-badge tb-pin">PINNED</span></div>
            <div class="t-sub">by <span style="color:var(--orange);">Marshall</span> · IPA Releases</div>
          </div>
          <div class="t-stats">
            <div><div class="ts-num">0</div><div class="ts-lbl">Replies</div></div>
            <div><div class="ts-num">0</div><div class="ts-lbl">Views</div></div>
          </div>
          <div class="t-last">
            <div class="t-last-user"><div class="t-av" style="border-color:var(--orange);color:var(--orange);">MA</div><span style="color:var(--orange);">Marshall</span></div>
            <div class="t-last-time">Feb 1</div>
          </div>
        </div>
        <div class="thread-row">
          <div class="t-type locked"><i class="fas fa-lock"></i></div>
          <div class="t-info">
            <div class="t-title">⚠️ Malicious IPA Hall of Shame — DO NOT INSTALL <span class="t-badge tb-lock">LOCKED</span></div>
            <div class="t-sub">by <span style="color:var(--green);">sipx</span> · Staff</div>
          </div>
          <div class="t-stats">
            <div><div class="ts-num">0</div><div class="ts-lbl">Replies</div></div>
            <div><div class="ts-num">0</div><div class="ts-lbl">Views</div></div>
          </div>
          <div class="t-last">
            <div class="t-last-user"><div class="t-av" style="border-color:var(--green);color:var(--green);">SI</div><span style="color:var(--green);">sipx</span></div>
            <div class="t-last-time">Feb 10</div>
          </div>
        </div>

        <!-- Normal threads -->
        <div style="padding:4px 14px;background:rgba(0,204,255,0.02);border-bottom:1px solid var(--border2);border-top:1px solid var(--border2);">
          <span style="font-size:9px;font-family:'Oswald',sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--dim);">💬 All Threads</span>
        </div>

        <!-- Empty state — threads loaded from DB -->
        <div style="padding:28px 20px;text-align:center;color:var(--dim);font-size:13px;">
          <i class="fas fa-comments" style="font-size:28px;margin-bottom:10px;display:block;opacity:0.25;"></i>
          No threads yet. Be the first to post!
        </div>

        <!-- Pagination -->
        <div class="pagination">
          <div class="pg-info">No threads yet</div>
          <div class="pg-pages">
            <button class="pg-btn active">1</button>
            <button class="pg-btn">2</button>
            <button class="pg-btn">3</button>
            <span style="padding:0 4px;color:var(--dim);line-height:26px;font-size:11px;">...</span>
            <button class="pg-btn">121</button>
            <button class="pg-btn">›</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Thread list sidebar -->
    <div style="display:flex;flex-direction:column;gap:16px;">
      <div class="sec-card">
        <div class="sec-head cyan"><div class="sec-head-title"><i class="fas fa-fire-alt"></i> Hot This Week</div></div>
        <div style="display:flex;flex-direction:column;gap:0;">
          <div style="padding:9px 12px;border-bottom:1px solid var(--border2);cursor:pointer;transition:background 0.15s;" onmouseover="this.style.background='rgba(255,255,255,0.02)'" onmouseout="this.style.background='transparent'" onclick="showView('v-posts')">
            <div style="font-size:12px;font-weight:600;color:var(--white);margin-bottom:2px;">Recall AI v2.1.0 Tweaked</div>
            <div style="font-size:10px;color:var(--dim);">88 replies · 2.2k views</div>
          </div>
          <div style="padding:9px 12px;border-bottom:1px solid var(--border2);cursor:pointer;transition:background 0.15s;" onmouseover="this.style.background='rgba(255,255,255,0.02)'" onmouseout="this.style.background='transparent'">
            <div style="font-size:12px;font-weight:600;color:var(--white);margin-bottom:2px;">Spotify++ v8.9.12</div>
            <div style="font-size:10px;color:var(--dim);">44 replies · 3.8k views</div>
          </div>
          <div style="padding:9px 12px;cursor:pointer;transition:background 0.15s;" onmouseover="this.style.background='rgba(255,255,255,0.02)'" onmouseout="this.style.background='transparent'">
            <div style="font-size:12px;font-weight:600;color:var(--white);margin-bottom:2px;">GTA San Andreas v2.11</div>
            <div style="font-size:10px;color:var(--dim);">67 replies · 4.7k views</div>
          </div>
        </div>
      </div>
      <div class="sec-card">
        <div class="sec-head cyan"><div class="sec-head-title"><i class="fas fa-users"></i> Who's Here</div></div>
        <div class="whos-row"><div class="whos-av" style="border-color:var(--yellow);color:var(--yellow);">iD</div><div class="online-dot"></div><div class="whos-name" style="color:var(--yellow);">iOS_Dev</div></div>
        <div class="whos-row"><div class="whos-av" style="border-color:var(--cyan);color:var(--cyan);">ZE</div><div class="online-dot"></div><div class="whos-name" style="color:var(--cyan);">ZEFv</div></div>
        <div class="whos-row"><div class="whos-av">xX</div><div class="online-dot away"></div><div class="whos-name">xXDarkXx</div></div>
        <div class="whos-row"><div class="whos-av">Tr</div><div class="online-dot"></div><div class="whos-name">Tr0jan</div></div>
        <div style="padding:5px 12px;font-size:10px;color:var(--dim);">+ 44 guests reading</div>
      </div>
    </div>
  </div>

</div>
</div>

<!-- ═══════════════════════════════════════════════════
     VIEW 3 — THREAD / POSTS
═══════════════════════════════════════════════════ -->
<div id="v-posts" class="forum-view">
<div class="wrap">

  <div class="breadcrumb">
    <a href="#" onclick="showView('v-category')">MSIGN.PARTY</a>
    <i class="fas fa-chevron-right"></i>
    <a href="#" onclick="showView('v-category')">Forum Index</a>
    <i class="fas fa-chevron-right"></i>
    <a href="#" onclick="showView('v-threads')">IPA Releases</a>
    <i class="fas fa-chevron-right"></i>
    <span style="color:var(--white);">Recall AI v2.1.0</span>
  </div>

  <!-- Thread header -->
  <div class="thread-header-card">
    <div class="thc-icon"><i class="fas fa-box-open"></i></div>
    <div class="thc-info">
      <div class="thc-title">Recall AI v2.1.0 — Fully tweaked + Unlimited mode</div>
      <div class="thc-meta">
        <span><i class="fas fa-user" style="color:var(--yellow);"></i><span style="color:var(--yellow);">iOS_Dev</span></span>
        <span><i class="fas fa-clock"></i>Feb 17, 2026 · 12:04 AM</span>
        <span><i class="fas fa-comments" style="color:var(--cyan);"></i><span style="color:var(--cyan);">88 replies</span></span>
        <span><i class="fas fa-eye"></i>2,241 views</span>
        <span><span class="t-badge tb-hot">HOT</span></span>
      </div>
    </div>
    <div style="display:flex;flex-direction:column;gap:6px;flex-shrink:0;">
      <button onclick="document.getElementById('reply-anchor').scrollIntoView({behavior:'smooth'})" style="background:var(--orange);border:none;color:#000;padding:8px 20px;font-family:'Oswald',sans-serif;font-size:13px;font-weight:700;letter-spacing:0.5px;cursor:pointer;display:flex;align-items:center;gap:6px;"><i class="fas fa-reply"></i> REPLY</button>
      <div style="display:flex;gap:6px;">
        <button class="tc-btn" style="flex:1;"><i class="fas fa-bell"></i> Watch</button>
        <button class="tc-btn"><i class="fas fa-share-alt"></i></button>
        <button class="tc-btn"><i class="fas fa-flag"></i></button>
      </div>
    </div>
  </div>

  <!-- Pagination top -->
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
    <div style="font-size:12px;color:var(--dim);">Showing posts 1–4 of 89</div>
    <div class="pg-pages">
      <button class="pg-btn active">1</button>
      <button class="pg-btn">2</button>
      <button class="pg-btn">3</button>
      <span style="padding:0 4px;color:var(--dim);line-height:26px;font-size:11px;">...</span>
      <button class="pg-btn">9</button>
      <button class="pg-btn">›</button>
    </div>
  </div>

  <!-- POSTS -->
  <div class="sec-card">
    <div class="post-layout">

      <!-- ─── POST 1 — iOS_Dev (OP) ─── -->
      <div class="post-row highlight" id="post-1">
        <!-- POSTER CARD -->
        <div class="poster-card">
          <!-- rank corner -->
          <div class="pb-rank-corner" style="border-color:var(--yellow) transparent transparent transparent;">
            <i class="fas fa-box-open pb-rank-icon" style="color:var(--yellow);"></i>
          </div>
          <!-- group bar -->
          <div class="pb-group-bar" style="background:linear-gradient(90deg,var(--yellow),#aa8800);"></div>
          <!-- avatar -->
          <div class="pb-avatar-wrap">
            <div class="pb-avatar" style="border-color:var(--yellow);box-shadow:0 0 12px rgba(255,204,0,0.2);background:linear-gradient(135deg,rgba(255,204,0,0.06),rgba(255,204,0,0.12));color:var(--yellow);">
              iD<div class="pb-online-dot"></div>
            </div>
            <div class="pb-username" style="color:var(--yellow);" onclick="openProfile('iOS_Dev', 'var(--yellow);')">iOS_Dev</div>
            <div class="pb-usertitle">ships tweaks daily</div>
            <div class="pb-group-badge" style="border-color:rgba(255,204,0,0.3);color:var(--yellow);background:rgba(255,204,0,0.06);">
              <i class="fas fa-box-open"></i> Encoder
            </div>
          </div>
          <!-- rep/likes -->
          <div class="pb-rep-row">
            <div class="pb-rep-cell">
              <span class="pb-rep-val" style="color:var(--green);">+841</span>
              <span class="pb-rep-lbl">Rep</span>
            </div>
            <div class="pb-rep-cell">
              <span class="pb-rep-val" style="color:var(--yellow);">2,204</span>
              <span class="pb-rep-lbl">Likes</span>
            </div>
          </div>
          <!-- vouches -->
          <div class="pb-vouches">
            <div class="pb-vouches-label"><i class="fas fa-shield-alt" style="color:var(--green);"></i> Vouches</div>
            <div class="pb-vouches-val">47</div>
          </div>
          <!-- stats -->
          <div class="pb-stats">
            <div class="pb-stat-row">
              <div class="pb-stat-key"><i class="fas fa-comment"></i> Posts</div>
              <div class="pb-stat-val" style="color:var(--white);">6,119</div>
            </div><div class="pb-stat-row">
              <div class="pb-stat-key"><i class="fas fa-box-open"></i> IPAs</div>
              <div class="pb-stat-val" style="color:var(--yellow);">214</div>
            </div><div class="pb-stat-row">
              <div class="pb-stat-key"><i class="fas fa-download"></i> Signs</div>
              <div class="pb-stat-val" style="color:var(--cyan);">28.4k</div>
            </div><div class="pb-stat-row">
              <div class="pb-stat-key"><i class="fas fa-calendar"></i> Joined</div>
              <div class="pb-stat-val" style="color:var(--white);">MAR 23</div>
            </div>
          </div>
          <!-- quota -->
          <div class="pb-quota">
            <div class="pb-quota-header">
              <span class="pb-quota-label"><i class="fas fa-pen-nib"></i> Sign Quota</span>
              <span class="pb-quota-count" style="color:var(--yellow);">12/50</span>
            </div>
            <div class="pb-quota-track">
              <div class="pb-quota-fill" style="width:24%;background:linear-gradient(90deg,var(--yellow),var(--orange));"></div>
            </div>
          </div>
          <!-- badges -->
          <div class="pb-badges">
            <div class="pb-badges-grid">
              <div class="pb-badge" style="background:rgba(255,204,0,0.12);border-color:rgba(255,204,0,0.3);color:var(--yellow);" data-tip="100 IPAs"><i class="fas fa-box-open"></i></div><div class="pb-badge" style="background:rgba(0,204,85,0.12);border-color:rgba(0,204,85,0.3);color:var(--green);" data-tip="25k Signs"><i class="fas fa-download"></i></div><div class="pb-badge" style="background:rgba(255,136,0,0.12);border-color:rgba(255,136,0,0.3);color:var(--orange);" data-tip="OG Member"><i class="fas fa-fire"></i></div><div class="pb-badge" style="background:rgba(0,204,255,0.12);border-color:rgba(0,204,255,0.3);color:var(--cyan);" data-tip="Verified Encoder"><i class="fas fa-shield-alt"></i></div><div class="pb-badge" style="background:rgba(160,102,255,0.1);border-color:rgba(160,102,255,0.25);color:var(--purple);" data-tip="iOS 17 Tested"><i class="fab fa-apple"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div>
            </div>
          </div>
          <!-- milestone -->
          <div class="pb-milestone" style="color:var(--yellow);background:rgba(255,204,0,0.04);">
            <i class="fas fa-star" style="font-size:7px;"></i>
            2 YEARS OF SERVICE
            <i class="fas fa-star" style="font-size:7px;"></i>
          </div>
          <!-- actions -->
          <div class="pb-actions">
            <button class="pb-action-btn rep"><i class="fas fa-thumbs-up"></i> +Rep</button>
            <button class="pb-action-btn vouch"><i class="fas fa-shield-alt"></i> Vouch</button>
          </div>
        </div>

        <!-- POST BODY -->
        <div class="post-body">
          <div class="post-meta-bar">
            <span class="post-num">#1 &nbsp;·&nbsp; Original Post</span>
            <span style="font-size:10px;background:rgba(255,136,0,0.1);color:var(--orange);border:1px solid rgba(255,136,0,0.2);padding:1px 6px;font-family:'Oswald',sans-serif;letter-spacing:0.5px;">OP</span>
            <span class="post-time"><i class="fas fa-clock"></i>Feb 17, 2026 · 12:04 AM</span>
            <a href="#" class="post-permalink"><i class="fas fa-link"></i></a>
          </div>
          <div class="post-content">
            <p><strong>Recall AI v2.1.0</strong> is finally here — this is the most feature-complete build I've put out. Fully tweaked with unlimited mode enabled, all paywalls stripped, and a bunch of new injection hooks for the updated binary.</p>
            <div class="warn-box"><strong style="color:var(--orange);">⚡ Requirements:</strong> iOS 14.0 or later · TrustCore v4.2 · 180 MB free space</div>
            <p><strong>What's included in this build:</strong></p>
            <ul>
              <li><i class="fas fa-check-circle" style="color:var(--green);margin-right:6px;"></i><strong>Unlimited Mode</strong> — All AI processing limits removed</li>
              <li><i class="fas fa-check-circle" style="color:var(--green);margin-right:6px;"></i><strong>No Subscription Required</strong> — Full premium access</li>
              <li><i class="fas fa-check-circle" style="color:var(--green);margin-right:6px;"></i><strong>History Unlocked</strong> — Unlimited recall history</li>
              <li><i class="fas fa-check-circle" style="color:var(--green);margin-right:6px;"></i><strong>Export Features</strong> — CSV, JSON, PDF export enabled</li>
              <li><i class="fas fa-check-circle" style="color:var(--green);margin-right:6px;"></i><strong>Custom Model Selection</strong> — Access all AI models</li>
            </ul>
            <p style="margin-top:14px;"><strong>Injected dylibs:</strong> <code>RecallUnlock.dylib v2.1</code> · <code>NoSub.dylib v1.3</code> · <code>HistoryExpand.dylib v1.0</code></p>
            <p><strong>Tested on:</strong> iPhone 15 Pro (iOS 17.4), iPhone 13 (iOS 16.7.6), iPhone XR (iOS 15.8.2). All passing ✓</p>
            <div class="info-box"><i class="fas fa-info-circle" style="color:var(--cyan);margin-right:6px;"></i>Sign via the portal above. For iOS 17.5 beta users, enable <em>Strip Entitlements</em> to avoid crashes.</div>
          </div>
          <div class="post-actions">
            <span class="post-action-btn liked"><i class="fas fa-thumbs-up"></i> 74</span>
            <span class="post-action-btn"><i class="fas fa-thumbs-down"></i></span>
            <span class="post-action-btn quoted"><i class="fas fa-quote-left"></i> Quote</span>
            <span class="post-action-btn"><i class="fas fa-reply"></i> Reply</span>
            <span class="post-action-btn post-action-ml"><i class="fas fa-share-alt"></i></span>
            <span class="post-action-btn"><i class="fas fa-flag"></i></span>
          </div>
        </div>
      </div><!-- /post-1 -->

      <!-- ─── POST 2 — ZEFv ─── -->
      <div class="post-row">
        <div class="poster-card">
          <!-- rank corner -->
          <div class="pb-rank-corner" style="border-color:var(--cyan) transparent transparent transparent;">
            <i class="fas fa-code pb-rank-icon" style="color:var(--cyan);"></i>
          </div>
          <!-- group bar -->
          <div class="pb-group-bar" style="background:linear-gradient(90deg,var(--cyan),#0077aa);"></div>
          <!-- avatar -->
          <div class="pb-avatar-wrap">
            <div class="pb-avatar" style="border-color:var(--cyan);box-shadow:0 0 12px rgba(0,204,255,0.2);background:linear-gradient(135deg,rgba(0,204,255,0.06),rgba(0,204,255,0.12));color:var(--cyan);">
              ZE<div class="pb-online-dot"></div>
            </div>
            <div class="pb-username" style="color:var(--cyan);" onclick="openProfile('ZEFv', 'var(--cyan);')">ZEFv</div>
            <div class="pb-usertitle">the hook whisperer</div>
            <div class="pb-group-badge" style="border-color:rgba(0,204,255,0.3);color:var(--cyan);background:rgba(0,204,255,0.06);">
              <i class="fas fa-code"></i> Developer
            </div>
          </div>
          <!-- rep/likes -->
          <div class="pb-rep-row">
            <div class="pb-rep-cell">
              <span class="pb-rep-val" style="color:var(--green);">+1,204</span>
              <span class="pb-rep-lbl">Rep</span>
            </div>
            <div class="pb-rep-cell">
              <span class="pb-rep-val" style="color:var(--cyan);">3,841</span>
              <span class="pb-rep-lbl">Likes</span>
            </div>
          </div>
          <!-- vouches -->
          <div class="pb-vouches">
            <div class="pb-vouches-label"><i class="fas fa-shield-alt" style="color:var(--green);"></i> Vouches</div>
            <div class="pb-vouches-val">89</div>
          </div>
          <!-- stats -->
          <div class="pb-stats">
            <div class="pb-stat-row">
              <div class="pb-stat-key"><i class="fas fa-comment"></i> Posts</div>
              <div class="pb-stat-val" style="color:var(--white);">8,204</div>
            </div><div class="pb-stat-row">
              <div class="pb-stat-key"><i class="fas fa-code"></i> Dylibs</div>
              <div class="pb-stat-val" style="color:var(--purple);">89</div>
            </div><div class="pb-stat-row">
              <div class="pb-stat-key"><i class="fas fa-syringe"></i> Injects</div>
              <div class="pb-stat-val" style="color:var(--cyan);">41.2k</div>
            </div><div class="pb-stat-row">
              <div class="pb-stat-key"><i class="fas fa-calendar"></i> Joined</div>
              <div class="pb-stat-val" style="color:var(--white);">JAN 22</div>
            </div>
          </div>
          <!-- quota -->
          <div class="pb-quota">
            <div class="pb-quota-header">
              <span class="pb-quota-label"><i class="fas fa-pen-nib"></i> Sign Quota</span>
              <span class="pb-quota-count" style="color:var(--cyan);">18/∞</span>
            </div>
            <div class="pb-quota-track">
              <div class="pb-quota-fill" style="width:100%;background:linear-gradient(90deg,var(--cyan),var(--purple));"></div>
            </div>
          </div>
          <!-- badges -->
          <div class="pb-badges">
            <div class="pb-badges-grid">
              <div class="pb-badge" style="background:rgba(0,204,255,0.12);border-color:rgba(0,204,255,0.3);color:var(--cyan);" data-tip="Code Wizard"><i class="fas fa-code"></i></div><div class="pb-badge" style="background:rgba(160,102,255,0.12);border-color:rgba(160,102,255,0.3);color:var(--purple);" data-tip="Hook Master"><i class="fas fa-crosshairs"></i></div><div class="pb-badge" style="background:rgba(0,204,85,0.12);border-color:rgba(0,204,85,0.3);color:var(--green);" data-tip="10k Injects"><i class="fas fa-syringe"></i></div><div class="pb-badge" style="background:rgba(255,136,0,0.12);border-color:rgba(255,136,0,0.3);color:var(--orange);" data-tip="OG Member"><i class="fas fa-fire"></i></div><div class="pb-badge" style="background:rgba(255,204,0,0.12);border-color:rgba(255,204,0,0.3);color:var(--yellow);" data-tip="Top Poster"><i class="fas fa-trophy"></i></div><div class="pb-badge" style="background:rgba(0,204,255,0.08);border-color:rgba(0,204,255,0.2);color:var(--cyan);" data-tip="Verified Dev"><i class="fas fa-shield-alt"></i></div><div class="pb-badge" style="background:rgba(255,51,255,0.1);border-color:rgba(255,51,255,0.25);color:var(--pink);" data-tip="100 Vouches"><i class="fas fa-star"></i></div><div class="pb-badge" style="background:rgba(160,102,255,0.08);border-color:rgba(160,102,255,0.2);color:var(--purple);" data-tip="iOS 17 Pioneer"><i class="fab fa-apple"></i></div><div class="pb-badge" style="background:rgba(0,204,85,0.08);border-color:rgba(0,204,85,0.2);color:var(--green);" data-tip="50 Dylibs"><i class="fas fa-terminal"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div>
            </div>
          </div>
          <!-- milestone -->
          <div class="pb-milestone" style="color:var(--cyan);background:rgba(0,204,255,0.04);">
            <i class="fas fa-star" style="font-size:7px;"></i>
            3 YEARS OF SERVICE
            <i class="fas fa-star" style="font-size:7px;"></i>
          </div>
          <!-- actions -->
          <div class="pb-actions">
            <button class="pb-action-btn rep"><i class="fas fa-thumbs-up"></i> +Rep</button>
            <button class="pb-action-btn vouch"><i class="fas fa-shield-alt"></i> Vouch</button>
          </div>
        </div>

        <div class="post-body">
          <div class="post-meta-bar">
            <span class="post-num">#2</span>
            <span class="post-time"><i class="fas fa-clock"></i>Feb 17, 2026 · 12:41 AM</span>
            <a href="#" class="post-permalink"><i class="fas fa-link"></i></a>
          </div>
          <div class="post-content">
            <div class="quote-block">
              <div class="quote-header"><i class="fas fa-quote-left"></i>iOS_Dev wrote:</div>
              Tested on iPhone 15 Pro (iOS 17.4), all passing ✓
            </div>
            <p>Can confirm on my end too. Checked the dylib hooks against the v2.1.0 binary — <code>RecallUnlock.dylib</code> patches the right offsets cleanly. No ASLR slide issues either.</p>
            <p>For devs curious about the internals: the subscription check is a simple boolean flag at <code>0x1004A2C18</code> — patched to always return <code>true</code>. The history limit is enforced server-side too, but the export function pulls locally, so stripping that endpoint call works perfectly.</p>
            <p>Nice work as always <strong style="color:var(--yellow);">iOS_Dev</strong> 🔥</p>
          </div>
          <div class="post-actions">
            <span class="post-action-btn liked"><i class="fas fa-thumbs-up"></i> 31</span>
            <span class="post-action-btn"><i class="fas fa-thumbs-down"></i></span>
            <span class="post-action-btn quoted"><i class="fas fa-quote-left"></i> Quote</span>
            <span class="post-action-btn"><i class="fas fa-reply"></i> Reply</span>
            <span class="post-action-btn post-action-ml"><i class="fas fa-flag"></i></span>
          </div>
        </div>
      </div><!-- /post-2 -->

      <!-- ─── POST 3 — xXDarkXx ─── -->
      <div class="post-row">
        <div class="poster-card">
          <!-- rank corner -->
          <div class="pb-rank-corner" style="border-color:var(--pink) transparent transparent transparent;">
            <i class="fas fa-gem pb-rank-icon" style="color:var(--pink);"></i>
          </div>
          <!-- group bar -->
          <div class="pb-group-bar" style="background:linear-gradient(90deg,var(--pink),#880088);"></div>
          <!-- avatar -->
          <div class="pb-avatar-wrap">
            <div class="pb-avatar" style="border-color:var(--pink);box-shadow:0 0 12px rgba(255,51,255,0.2);background:linear-gradient(135deg,rgba(255,51,255,0.06),rgba(255,51,255,0.12));color:var(--pink);">
              xX<div class="pb-online-dot away"></div>
            </div>
            <div class="pb-username" style="color:var(--pink);" onclick="openProfile('xXDarkXx', 'var(--pink);')">xXDarkXx</div>
            <div class="pb-usertitle">darkness incarnate</div>
            <div class="pb-group-badge" style="border-color:rgba(255,51,255,0.3);color:var(--pink);background:rgba(255,51,255,0.06);">
              <i class="fas fa-gem"></i> VIP
            </div>
          </div>
          <!-- rep/likes -->
          <div class="pb-rep-row">
            <div class="pb-rep-cell">
              <span class="pb-rep-val" style="color:var(--green);">+512</span>
              <span class="pb-rep-lbl">Rep</span>
            </div>
            <div class="pb-rep-cell">
              <span class="pb-rep-val" style="color:var(--pink);">1,441</span>
              <span class="pb-rep-lbl">Likes</span>
            </div>
          </div>
          <!-- vouches -->
          <div class="pb-vouches">
            <div class="pb-vouches-label"><i class="fas fa-shield-alt" style="color:var(--green);"></i> Vouches</div>
            <div class="pb-vouches-val">31</div>
          </div>
          <!-- stats -->
          <div class="pb-stats">
            <div class="pb-stat-row">
              <div class="pb-stat-key"><i class="fas fa-comment"></i> Posts</div>
              <div class="pb-stat-val" style="color:var(--white);">3,441</div>
            </div><div class="pb-stat-row">
              <div class="pb-stat-key"><i class="fas fa-box-open"></i> IPAs</div>
              <div class="pb-stat-val" style="color:var(--yellow);">88</div>
            </div><div class="pb-stat-row">
              <div class="pb-stat-key"><i class="fas fa-download"></i> Signs</div>
              <div class="pb-stat-val" style="color:var(--cyan);">9.2k</div>
            </div><div class="pb-stat-row">
              <div class="pb-stat-key"><i class="fas fa-calendar"></i> Joined</div>
              <div class="pb-stat-val" style="color:var(--white);">SEP 23</div>
            </div>
          </div>
          <!-- quota -->
          <div class="pb-quota">
            <div class="pb-quota-header">
              <span class="pb-quota-label"><i class="fas fa-pen-nib"></i> Sign Quota</span>
              <span class="pb-quota-count" style="color:var(--pink);">19/25</span>
            </div>
            <div class="pb-quota-track">
              <div class="pb-quota-fill" style="width:76%;background:linear-gradient(90deg,var(--pink),#880088);"></div>
            </div>
          </div>
          <!-- badges -->
          <div class="pb-badges">
            <div class="pb-badges-grid">
              <div class="pb-badge" style="background:rgba(255,51,255,0.12);border-color:rgba(255,51,255,0.3);color:var(--pink);" data-tip="VIP Member"><i class="fas fa-gem"></i></div><div class="pb-badge" style="background:rgba(255,136,0,0.12);border-color:rgba(255,136,0,0.3);color:var(--orange);" data-tip="OG Member"><i class="fas fa-fire"></i></div><div class="pb-badge" style="background:rgba(0,204,85,0.12);border-color:rgba(0,204,85,0.3);color:var(--green);" data-tip="Verified"><i class="fas fa-shield-alt"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div>
            </div>
          </div>
          <!-- milestone -->
          <div class="pb-milestone" style="color:var(--pink);background:rgba(255,51,255,0.04);">
            <i class="fas fa-star" style="font-size:7px;"></i>
            1 YEAR OF SERVICE
            <i class="fas fa-star" style="font-size:7px;"></i>
          </div>
          <!-- actions -->
          <div class="pb-actions">
            <button class="pb-action-btn rep"><i class="fas fa-thumbs-up"></i> +Rep</button>
            <button class="pb-action-btn vouch"><i class="fas fa-shield-alt"></i> Vouch</button>
          </div>
        </div>

        <div class="post-body">
          <div class="post-meta-bar">
            <span class="post-num">#3</span>
            <span class="post-time"><i class="fas fa-clock"></i>Feb 17, 2026 · 1:15 AM</span>
            <a href="#" class="post-permalink"><i class="fas fa-link"></i></a>
          </div>
          <div class="post-content">
            <p>Signed and installed in 29 seconds flat on the Priority server. <strong>That new 40% speed improvement is legit.</strong></p>
            <p>Recall AI is absolutely insane with unlimited mode on. The AI memory across sessions is seamless. Had it summarize 3 months of notes in about 4 seconds. This is the one, lads.</p>
            <p>iPhone 14 Pro, iOS 17.2 — zero crashes, fully stable. OTA install worked first try. 🔥🔥🔥</p>
          </div>
          <div class="post-actions">
            <span class="post-action-btn liked"><i class="fas fa-thumbs-up"></i> 18</span>
            <span class="post-action-btn"><i class="fas fa-thumbs-down"></i></span>
            <span class="post-action-btn quoted"><i class="fas fa-quote-left"></i> Quote</span>
            <span class="post-action-btn"><i class="fas fa-reply"></i> Reply</span>
            <span class="post-action-btn post-action-ml"><i class="fas fa-flag"></i></span>
          </div>
        </div>
      </div><!-- /post-3 -->

      <!-- ─── POST 4 — n3wbie_42 ─── -->
      <div class="post-row">
        <div class="poster-card">
          <!-- rank corner -->
          <div class="pb-rank-corner" style="border-color:var(--grey) transparent transparent transparent;">
            <i class="fas fa-user pb-rank-icon" style="color:var(--grey);"></i>
          </div>
          <!-- group bar -->
          <div class="pb-group-bar" style="background:linear-gradient(90deg,var(--dim),#333);"></div>
          <!-- avatar -->
          <div class="pb-avatar-wrap">
            <div class="pb-avatar" style="border-color:var(--grey);box-shadow:0 0 12px rgba(153,153,153,0.2);background:linear-gradient(135deg,rgba(153,153,153,0.06),rgba(153,153,153,0.12));color:var(--grey);">
              n3<div class="pb-online-dot"></div>
            </div>
            <div class="pb-username" style="color:var(--grey);" onclick="openProfile('n3wbie_42', 'var(--grey);')">n3wbie_42</div>
            <div class="pb-usertitle">new to the scene</div>
            <div class="pb-group-badge" style="border-color:rgba(153,153,153,0.3);color:var(--grey);background:rgba(153,153,153,0.06);">
              <i class="fas fa-user"></i> Member
            </div>
          </div>
          <!-- rep/likes -->
          <div class="pb-rep-row">
            <div class="pb-rep-cell">
              <span class="pb-rep-val" style="color:var(--green);">+4</span>
              <span class="pb-rep-lbl">Rep</span>
            </div>
            <div class="pb-rep-cell">
              <span class="pb-rep-val" style="color:var(--grey);">12</span>
              <span class="pb-rep-lbl">Likes</span>
            </div>
          </div>
          <!-- vouches -->
          <div class="pb-vouches">
            <div class="pb-vouches-label"><i class="fas fa-shield-alt" style="color:var(--green);"></i> Vouches</div>
            <div class="pb-vouches-val">0</div>
          </div>
          <!-- stats -->
          <div class="pb-stats">
            <div class="pb-stat-row">
              <div class="pb-stat-key"><i class="fas fa-comment"></i> Posts</div>
              <div class="pb-stat-val" style="color:var(--white);">7</div>
            </div><div class="pb-stat-row">
              <div class="pb-stat-key"><i class="fas fa-download"></i> Signs</div>
              <div class="pb-stat-val" style="color:var(--cyan);">3</div>
            </div><div class="pb-stat-row">
              <div class="pb-stat-key"><i class="fas fa-calendar"></i> Joined</div>
              <div class="pb-stat-val" style="color:var(--white);">FEB 26</div>
            </div>
          </div>
          <!-- quota -->
          <div class="pb-quota">
            <div class="pb-quota-header">
              <span class="pb-quota-label"><i class="fas fa-pen-nib"></i> Sign Quota</span>
              <span class="pb-quota-count" style="color:var(--orange);">3/5</span>
            </div>
            <div class="pb-quota-track">
              <div class="pb-quota-fill" style="width:60%;background:var(--orange);"></div>
            </div>
          </div>
          <!-- badges -->
          <div class="pb-badges">
            <div class="pb-badges-grid">
              <div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div><div class="pb-badge locked" data-tip="Locked"><i class="fas fa-lock"></i></div>
            </div>
          </div>
          <!-- milestone -->
          <div class="pb-milestone" style="color:var(--grey);background:rgba(153,153,153,0.04);">
            <i class="fas fa-star" style="font-size:7px;"></i>
            NEW MEMBER
            <i class="fas fa-star" style="font-size:7px;"></i>
          </div>
          <!-- actions -->
          <div class="pb-actions">
            <button class="pb-action-btn rep"><i class="fas fa-thumbs-up"></i> +Rep</button>
            <button class="pb-action-btn vouch"><i class="fas fa-shield-alt"></i> Vouch</button>
          </div>
        </div>

        <div class="post-body">
          <div class="post-meta-bar">
            <span class="post-num">#4</span>
            <span style="font-size:10px;background:rgba(0,204,85,0.08);color:var(--green);border:1px solid rgba(0,204,85,0.15);padding:1px 6px;font-family:'Oswald',sans-serif;letter-spacing:0.5px;">NEW MEMBER</span>
            <span class="post-time"><i class="fas fa-clock"></i>Feb 17, 2026 · 2:09 AM</span>
            <a href="#" class="post-permalink"><i class="fas fa-link"></i></a>
          </div>
          <div class="post-content">
            <p>Hey, I just joined and I'm really new to all this. I tried signing this app but it keeps saying "Installation Failed" after the OTA prompt. I'm on iPhone XR iOS 16.7.8.</p>
            <p>Do I need to do anything special? Is there a guide somewhere? Sorry if this is the wrong place to ask 🙏</p>
          </div>
          <div class="post-actions">
            <span class="post-action-btn"><i class="fas fa-thumbs-up"></i> 0</span>
            <span class="post-action-btn"><i class="fas fa-thumbs-down"></i></span>
            <span class="post-action-btn quoted"><i class="fas fa-quote-left"></i> Quote</span>
            <span class="post-action-btn"><i class="fas fa-reply"></i> Reply</span>
            <span class="post-action-btn post-action-ml" style="font-size:10px;color:var(--dim);">Staff · Edit · Delete · Warn</span>
            <span class="post-action-btn"><i class="fas fa-flag"></i></span>
          </div>
        </div>
      </div><!-- /post-4 -->

    </div>
  </div><!-- /sec-card posts -->

  <!-- Pagination bottom -->
  <div style="display:flex;justify-content:space-between;align-items:center;margin-top:10px;margin-bottom:16px;">
    <div style="font-size:12px;color:var(--dim);">Showing posts 1–4 of 89</div>
    <div class="pg-pages">
      <button class="pg-btn active">1</button>
      <button class="pg-btn">2</button>
      <button class="pg-btn">3</button>
      <span style="padding:0 4px;color:var(--dim);line-height:26px;font-size:11px;">...</span>
      <button class="pg-btn">9</button>
      <button class="pg-btn">›</button>
    </div>
  </div>

  <!-- REPLY BOX -->
  <div class="reply-box" id="reply-anchor">
    <div class="reply-box-head"><i class="fas fa-reply"></i> Post a Reply</div>
    <div style="display:flex;gap:12px;align-items:flex-start;">
      <div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#1a1200,#2a1e00);border:2px solid var(--orange);display:flex;align-items:center;justify-content:center;font-family:'Oswald',sans-serif;font-size:12px;font-weight:700;color:var(--orange);flex-shrink:0;">AD</div>
      <div style="flex:1;">
        <div class="reply-toolbar">
          <button class="rt-btn" onclick="wrapText(this,'**','**','bold text')" title="Bold"><i class="fas fa-bold"></i></button>
          <button class="rt-btn" onclick="wrapText(this,'_','_','italic text')" title="Italic"><i class="fas fa-italic"></i></button>
          <button class="rt-btn"><i class="fas fa-underline"></i></button>
          <button class="rt-btn" onclick="wrapText(this,'> ','','quoted text')" title="Quote"><i class="fas fa-quote-left"></i></button>
          <button class="rt-btn" onclick="wrapText(this,'`','`','code')" title="Code"><i class="fas fa-code"></i></button>
          <button class="rt-btn"><i class="fas fa-link"></i></button>
          <button class="rt-btn"><i class="fas fa-image"></i></button>
          <button class="rt-btn"><i class="fas fa-list-ul"></i></button>
          <button class="rt-btn" onclick="insertEmoji(this)" title="Emoji"><i class="fas fa-smile"></i></button>
        </div>
        <textarea class="reply-textarea" placeholder="Write your reply here... Use @username to mention someone."></textarea>
        <div class="reply-submit-row">
          <div class="reply-opts">
            <label class="reply-check"><input type="checkbox" style="accent-color:var(--orange);"> Subscribe to thread</label>
            <label class="reply-check"><input type="checkbox" style="accent-color:var(--orange);"> Preview before posting</label>
          </div>
          <button class="submit-btn" onclick="(function(btn){var ta=btn.closest('.reply-box').querySelector('.reply-textarea');if(ta&&ta.value.trim()){showToast('success','Reply Posted','Your reply has been added to the thread.');ta.value='';}else{showToast('warning','Empty Reply','Write your reply first.');if(ta)ta.focus();}})(this)"><i class="fas fa-paper-plane"></i> POST REPLY</button>
        </div>
      </div>
    </div>
  </div>

</div>
</div>

<!-- ═══════════════════════════════════════════════════
     VIEW 4 — USER PROFILE
═══════════════════════════════════════════════════ -->
<div id="v-profile" class="forum-view">
<div class="wrap" style="max-width:100%;padding:0;">

  <div class="breadcrumb" style="padding:8px 20px;">
    <a href="#" onclick="showView('v-category')">MSIGN.PARTY</a>
    <i class="fas fa-chevron-right"></i>
    <a href="#" onclick="showView('v-threads')">Forum</a>
    <i class="fas fa-chevron-right"></i>
    <span style="color:var(--white);" id="profile-breadcrumb-name">iOS_Dev</span>
  </div>

<!-- ════ PROFILE BANNER ════ -->
<div class="profile-banner-wrap">
  <div class="profile-banner-img" id="prof-banner-img"></div>
  <div class="profile-banner-scan"></div>
  <div class="profile-banner-bottom"></div>

  <!-- BG Edit -->
  <button class="banner-edit-btn" onclick="profileToggleBgPanel()">
    <i class="fas fa-image"></i> Customize BG
  </button>

  <div class="bg-picker-panel" id="prof-bg-panel">
    <h4><i class="fas fa-palette"></i> &nbsp;Background</h4>
    <div class="bg-preset-grid" id="prof-bg-presets"></div>
    <input class="bg-url-input" id="prof-bg-url-input" placeholder="Paste image URL..." type="text"/>
    <button class="bg-apply-btn" onclick="profileApplyBgUrl()"><i class="fas fa-check"></i> Apply URL</button>
  </div>
</div>

<!-- ════ PAGE CONTENT ════ -->
<div class="page">

  <!-- PROFILE HEADER -->
  <div class="profile-header">
    <div class="profile-avatar-wrap">
      <div class="profile-avatar" id="prof-avatar-el">
        iD
        <div class="av-edit-overlay"><i class="fas fa-camera" style="font-size:20px;margin-bottom:2px;"></i>Change</div>
      </div>
      <div class="av-online online-dot"></div>
    </div>
    <div class="profile-meta">
      <div class="profile-badges-row">
        <span class="prof-badge pb-encoder"><i class="fas fa-box-open"></i> Encoder</span>
        <span class="prof-badge pb-vip"><i class="fas fa-gem"></i> VIP</span>
        <span class="prof-badge pb-verified"><i class="fas fa-shield-check"></i> Verified</span>
        <span class="prof-badge pb-trusted"><i class="fas fa-star"></i> Trusted</span>
        <span class="prof-badge pb-og"><i class="fas fa-fire"></i> OG Member</span>
      </div>
      <div class="profile-name">
        ZefV
        <i class="fas fa-circle-check verified-icon"></i>
      </div>
      <div class="profile-title">// ships tweaks daily · the hook whisperer · IPA encoder since 2023</div>
      <div class="profile-status-row">
        <span style="color:var(--green);"><i class="fas fa-circle" style="font-size:7px;"></i> Online Now</span>
        <span><i class="fas fa-calendar-alt"></i> Joined Mar 14, 2023</span>
        <span><i class="fab fa-apple"></i> iPhone 15 Pro · iOS 17.4</span>
        <span><i class="fas fa-map-marker-alt"></i> California, US</span>
        <span><i class="fas fa-clock"></i> Last seen just now</span>
      </div>
    </div>
    <div class="profile-actions">
      <button class="prof-btn primary" onclick="openPMModal('iOS_Dev','iD','','#ffd000')"><i class="fas fa-envelope"></i> Send PM</button>
      <div class="prof-btn-row">
        <button class="prof-btn secondary" onclick="openRepModal('iOS_Dev','iD','#00e87a','+841')"><i class="fas fa-thumbs-up"></i> +Rep</button>
        <button class="prof-btn secondary" onclick="openVouchModal('iOS_Dev','iD','#9d5cff')"><i class="fas fa-shield-alt"></i> Vouch</button>
        <button class="prof-btn secondary" onclick="openFriendModal('iOS_Dev','iD','#00d4ff')"><i class="fas fa-user-plus"></i></button>
        <button class="prof-btn secondary" style="border-color:rgba(255,51,51,0.3);color:var(--red);" onclick="openReportModal('iOS_Dev')"><i class="fas fa-flag"></i></button>
      </div>
    </div>
  </div>

  <!-- QUICK STATS BAR -->
  <div class="quick-stats-bar">
    <div class="qs-cell">
      <div class="qs-num" style="color:var(--cyan);">9</div>
      <div class="qs-lbl">Posts</div>
    </div>
    <div class="qs-cell">
      <div class="qs-num" style="color:var(--yellow);">4</div>
      <div class="qs-lbl">IPAs Released</div>
    </div>
    <div class="qs-cell">
      <div class="qs-num" style="color:var(--purple);">9</div>
      <div class="qs-lbl">Dylibs Built</div>
    </div>
    <div class="qs-cell">
      <div class="qs-num" style="color:var(--orange);">1</div>
      <div class="qs-lbl">Total Signs</div>
    </div>
    <div class="qs-cell" onclick="openRepPopup()" style="cursor:pointer;" title="View Reputation">
      <div class="qs-num" style="color:var(--green);">+8</div>
      <div class="qs-lbl">Reputation</div>
    </div>
    <div class="qs-cell" onclick="openVouchPopup()" style="cursor:pointer;" title="View Vouches">
      <div class="qs-num" style="color:var(--pink);">7</div>
      <div class="qs-lbl">Vouches</div>
    </div>
  </div>

  <!-- MAIN GRID -->
  <div class="profile-grid">

    <!-- ── LEFT SIDEBAR ── -->
    <div>

      <!-- Info card -->
      <div class="sc">
        <div class="sc-head"><div class="sc-title"><i class="fas fa-id-card"></i> Profile Info</div></div>
        <div class="info-row"><div class="info-key"><i class="fas fa-circle"></i> Status</div><div class="info-val green"><i class="fas fa-circle" style="font-size:7px;"></i> Online · Browsing Forum</div></div>
        <div class="info-row"><div class="info-key"><i class="fas fa-hashtag"></i> UID</div><div class="info-val" style="font-family:'JetBrains Mono',monospace;font-size:11px;">#00004</div></div>
        <div class="info-row"><div class="info-key"><i class="fas fa-calendar"></i> Joined</div><div class="info-val">Feb 14, 2026</div></div>
        <div class="info-row"><div class="info-key"><i class="fas fa-clock"></i> Online</div><div class="info-val">1 days · 0k hrs</div></div>
        <div class="info-row"><div class="info-key"><i class="fab fa-apple"></i> Device</div><div class="info-val">iPhone 14 Pro · 18.5</div></div>
        <div class="info-row"><div class="info-key"><i class="fas fa-eye"></i> Views</div><div class="info-val">81 profile visits</div></div>
        <div class="info-row"><div class="info-key"><i class="fas fa-layer-group"></i> Plan</div><div class="info-val orange">VIP · Unlimited Signs</div></div>
        <div class="info-row"><div class="info-key"><i class="fas fa-code-branch"></i> Build</div><div class="info-val cyan">TrustCore v4.2</div></div>

        <!-- Rep bar -->
        <div class="rep-bar-wrap" onclick="openRepPopup()" style="cursor:pointer;" title="View Reputation">
          <div class="rep-bar-header">
            <div class="rep-label"><i class="fas fa-star" style="color:var(--green);"></i> Reputation</div>
            <div class="rep-val">+841 <i class="fas fa-external-link-alt" style="font-size:8px;color:var(--dim);margin-left:3px;"></i></div>
          </div>
          <div class="rep-track"><div class="rep-fill" style="width:84.1%;"></div></div>
          <div class="rep-sub"><span>0</span><span style="color:var(--green);">LEGENDARY @ 1000</span></div>
        </div>

        <!-- Quota -->
        <div class="quota-wrap">
          <div class="quota-header">
            <div class="quota-label"><i class="fas fa-pen-nib" style="color:var(--orange);"></i> Sign Quota</div>
            <div class="quota-count">∞ / ∞</div>
          </div>
          <div class="quota-track"><div class="quota-fill" style="width:100%;background:linear-gradient(90deg,var(--orange),var(--purple));"></div></div>
        </div>
      </div>

      <!-- Achievements -->
      <div class="sc">
        <div class="sc-head yellow">
          <div class="sc-title"><i class="fas fa-trophy"></i> Achievements</div>
          <div class="sc-meta">15 / 40</div>
        </div>
        <div class="achiev-grid">
          <div class="achiev" style="background:rgba(255,208,0,0.12);border-color:rgba(255,208,0,0.3);cursor:pointer;" title="Century Builder — 100 IPAs Released" onclick="openAchievPopup('achiev-century-builder')">🏆</div>
          <div class="achiev" style="background:rgba(157,92,255,0.12);border-color:rgba(157,92,255,0.3);cursor:pointer;" title="Hook Master" onclick="openAchievPopup('achiev-hook-master')">🔮</div>
          <div class="achiev" style="background:rgba(0,232,122,0.1);border-color:rgba(0,232,122,0.25);cursor:pointer;" title="10k Injects" onclick="openAchievPopup('achiev-10k-injects')">💉</div>
          <div class="achiev" style="background:rgba(255,122,0,0.12);border-color:rgba(255,122,0,0.3);cursor:pointer;" title="OG Member" onclick="openAchievPopup('achiev-og-member')">🔥</div>
          <div class="achiev" style="background:rgba(0,212,255,0.1);border-color:rgba(0,212,255,0.2);cursor:pointer;" title="iOS 17 Pioneer" onclick="openAchievPopup('achiev-ios17')">🍎</div>
          <div class="achiev" style="background:rgba(255,61,205,0.12);border-color:rgba(255,61,205,0.25);cursor:pointer;" title="100 Vouches" onclick="openAchievPopup('achiev-100-vouches')">⭐</div>
          <div class="achiev" style="background:rgba(255,208,0,0.1);border-color:rgba(255,208,0,0.2);cursor:pointer;" title="Top Encoder 2025" onclick="openAchievPopup('achiev-top-encoder')">🥇</div>
          <div class="achiev" style="background:rgba(0,232,122,0.08);border-color:rgba(0,232,122,0.2);cursor:pointer;" title="Verified Builder" onclick="openAchievPopup('achiev-verified-builder')">🛡️</div>
          <div class="achiev" style="background:rgba(0,212,255,0.08);border-color:rgba(0,212,255,0.15);cursor:pointer;" title="50 Dylibs" onclick="openAchievPopup('achiev-50-dylibs')">🧬</div>
          <div class="achiev" style="background:rgba(255,122,0,0.08);border-color:rgba(255,122,0,0.2);cursor:pointer;" title="Gold Donor" onclick="openAchievPopup('achiev-gold-donor')">💎</div>
          <div class="achiev" style="background:rgba(157,92,255,0.08);border-color:rgba(157,92,255,0.2);cursor:pointer;" title="25k Signs" onclick="openAchievPopup('achiev-25k-signs')">📦</div>
          <div class="achiev" style="background:rgba(255,208,0,0.08);border-color:rgba(255,208,0,0.15);cursor:pointer;" title="2yr Service" onclick="openAchievPopup('achiev-2yr')">🎖️</div>
          <div class="achiev" style="background:rgba(0,232,122,0.06);border-color:rgba(0,232,122,0.12);cursor:pointer;" title="Forum Elder" onclick="openAchievPopup('achiev-forum-elder')">📜</div>
          <div class="achiev" style="background:rgba(255,122,0,0.06);border-color:rgba(255,122,0,0.12);cursor:pointer;" title="5k Posts" onclick="openAchievPopup('achiev-5k-posts')">💬</div>
          <div class="achiev" style="background:rgba(0,212,255,0.06);border-color:rgba(0,212,255,0.1);cursor:pointer;" title="ARM64 Expert" onclick="openAchievPopup('achiev-arm64')">⚡</div>
          <div class="achiev locked" title="Locked"><i class="fas fa-lock"></i></div>
          <div class="achiev locked" title="Locked"><i class="fas fa-lock"></i></div>
          <div class="achiev locked" title="Locked"><i class="fas fa-lock"></i></div>
          <div class="achiev locked" title="Locked"><i class="fas fa-lock"></i></div>
          <div class="achiev locked" title="Locked"><i class="fas fa-lock"></i></div>
        </div>
      </div>

      <!-- Social links -->
      <div class="sc">
        <div class="sc-head cyan"><div class="sc-title"><i class="fas fa-link"></i> Socials</div></div>
        <div class="social-row">
          <div class="social-icon" style="background:rgba(88,101,242,0.15);border:1px solid rgba(88,101,242,0.25);color:#5865F2;"><i class="fab fa-discord"></i></div>
          <div class="social-name">Discord</div>
          <div class="social-handle">iOS_Dev#0001</div>
        </div>
        <div class="social-row">
          <div class="social-icon" style="background:rgba(0,212,255,0.1);border:1px solid rgba(0,212,255,0.2);color:var(--cyan);"><i class="fab fa-telegram"></i></div>
          <div class="social-name">Telegram</div>
          <div class="social-handle">@ios_dev_xyz</div>
        </div>
        <div class="social-row">
          <div class="social-icon" style="background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:#fff;"><i class="fab fa-github"></i></div>
          <div class="social-name">GitHub</div>
          <div class="social-handle">github.com/iosdev</div>
        </div>
        <div class="social-row">
          <div class="social-icon" style="background:rgba(255,122,0,0.1);border:1px solid rgba(255,122,0,0.2);color:var(--orange);"><i class="fas fa-globe"></i></div>
          <div class="social-name">Website</div>
          <div class="social-handle">ios-dev.xyz</div>
        </div>
      </div>

      <!-- Signature -->
      <div class="sc">
        <div class="sc-head grey"><div class="sc-title"><i class="fas fa-signature"></i> Signature</div></div>
        <div style="padding:14px;">
          <div class="sig-label"><i class="fas fa-quote-left"></i> Sig</div>
          <div class="sig-box">
            "If it's tweaked, I built it." — All IPAs personally tested before release on real hardware.
            <br><br>
            <span style="color:var(--orange);font-style:normal;font-family:'JetBrains Mono',monospace;font-size:10px;">// MSIGN.PARTY · iOS Encoder · TrustCore Certified</span>
          </div>
        </div>
      </div>

    </div>

    <!-- ── RIGHT COLUMN ── -->
    <div>

      <!-- Tabs -->
      <div class="tab-bar" id="prof-main-tabs">
        <div class="tab-item active" onclick="profileSetTab(this,'tab-ipas')"><i class="fas fa-box-open"></i> IPAs <span style="color:var(--dim);font-weight:400;">(214)</span></div>
        <div class="tab-item" onclick="profileSetTab(this,'tab-dylibs')"><i class="fas fa-code"></i> Dylibs <span style="color:var(--dim);font-weight:400;">(89)</span></div>
        <div class="tab-item" onclick="profileSetTab(this,'tab-posts')"><i class="fas fa-comments"></i> Posts</div>
        <div class="tab-item" onclick="profileSetTab(this,'tab-activity')"><i class="fas fa-history"></i> Activity</div>
        <div class="tab-item" onclick="profileSetTab(this,'tab-stats')"><i class="fas fa-chart-bar"></i> Stats</div>
        <div class="tab-item" onclick="profileSetTab(this,'tab-friends')"><i class="fas fa-users"></i> Friends <span style="color:var(--dim);font-weight:400;">(88)</span></div>

      </div>

      <!-- IPA TAB -->
      <div class="tab-content active sc" id="tab-ipas" style="margin-top:0;border-radius:0 0 4px 4px;border-top:none;">
        <div class="sc-head" style="border-radius:0;">
          <div class="sc-title"><i class="fas fa-box-open"></i> IPA Releases</div>
          <div class="sc-meta">214 total · Sorted by signs</div>
        </div>
        <div class="ipa-grid">

          <div class="ipa-card">
            <div class="ipa-icon" style="background:#191414;"><img src="https://cdn.simpleicons.org/spotify/1ED760" alt="Spotify"></div>
            <div class="ipa-info">
              <div class="ipa-name">Spotify++ <span class="ipa-badge ib-hot">HOT</span></div>
              <div class="ipa-bundle">com.spotify.client</div>
              <div class="ipa-meta">
                <span class="ipa-ver">v8.9.12</span>
                <span class="ipa-dl"><i class="fas fa-download"></i>12.8k</span>
                <span class="ipa-ver">68 MB · iOS 14–17</span>
              </div>
            </div>
            <div class="ipa-sign-count">12.8k<small>SIGNS</small></div>
          </div>

          <div class="ipa-card">
            <div class="ipa-icon" style="background:radial-gradient(circle at 30% 110%,#f09433,#dc2743 50%,#bc1888);"><img src="https://cdn.simpleicons.org/instagram/ffffff" alt="Instagram"></div>
            <div class="ipa-info">
              <div class="ipa-name">Instagram++ <span class="ipa-badge ib-upd">UPD</span></div>
              <div class="ipa-bundle">com.burbn.instagram</div>
              <div class="ipa-meta">
                <span class="ipa-ver">v263.0</span>
                <span class="ipa-dl"><i class="fas fa-download"></i>6.1k</span>
                <span class="ipa-ver">94 MB · iOS 14–17</span>
              </div>
            </div>
            <div class="ipa-sign-count">6.1k<small>SIGNS</small></div>
          </div>

          <div class="ipa-card">
            <div class="ipa-icon" style="background:#0d1117;"><img src="https://cdn.simpleicons.org/discord/5865F2" alt="Discord"></div>
            <div class="ipa-info">
              <div class="ipa-name">Discord++ <span class="ipa-badge ib-hot">HOT</span></div>
              <div class="ipa-bundle">com.hammerandchisel.discord</div>
              <div class="ipa-meta">
                <span class="ipa-ver">v222.0</span>
                <span class="ipa-dl"><i class="fas fa-download"></i>4.8k</span>
                <span class="ipa-ver">88 MB · iOS 15–17</span>
              </div>
            </div>
            <div class="ipa-sign-count">4.8k<small>SIGNS</small></div>
          </div>

          <div class="ipa-card">
            <div class="ipa-icon" style="background:#010101;"><img src="https://cdn.simpleicons.org/tiktok/ffffff" alt="TikTok"></div>
            <div class="ipa-info">
              <div class="ipa-name">TikTok++ <span class="ipa-badge ib-new">NEW</span></div>
              <div class="ipa-bundle">com.zhiliaoapp.musically</div>
              <div class="ipa-meta">
                <span class="ipa-ver">v33.2.0</span>
                <span class="ipa-dl"><i class="fas fa-download"></i>4.4k</span>
                <span class="ipa-ver">175 MB · iOS 14–17</span>
              </div>
            </div>
            <div class="ipa-sign-count">4.4k<small>SIGNS</small></div>
          </div>

          <div class="ipa-card">
            <div class="ipa-icon" style="background:#25D366;"><img src="https://cdn.simpleicons.org/whatsapp/ffffff" alt="WhatsApp"></div>
            <div class="ipa-info">
              <div class="ipa-name">WhatsApp++ <span class="ipa-badge ib-new">NEW</span></div>
              <div class="ipa-bundle">net.whatsapp.WhatsApp</div>
              <div class="ipa-meta">
                <span class="ipa-ver">v24.8.74</span>
                <span class="ipa-dl"><i class="fas fa-download"></i>3.9k</span>
                <span class="ipa-ver">196 MB · iOS 14–17</span>
              </div>
            </div>
            <div class="ipa-sign-count">3.9k<small>SIGNS</small></div>
          </div>

          <div class="ipa-card">
            <div class="ipa-icon" style="background:#ff0000;"><img src="https://cdn.simpleicons.org/youtube/ffffff" alt="YouTube"></div>
            <div class="ipa-info">
              <div class="ipa-name">YouTube Music++ <span class="ipa-badge ib-upd">UPD</span></div>
              <div class="ipa-bundle">com.google.ios.ytmusic</div>
              <div class="ipa-meta">
                <span class="ipa-ver">v7.2.1</span>
                <span class="ipa-dl"><i class="fas fa-download"></i>9.3k</span>
                <span class="ipa-ver">112 MB · iOS 15–17</span>
              </div>
            </div>
            <div class="ipa-sign-count">9.3k<small>SIGNS</small></div>
          </div>

          <div class="ipa-card">
            <div class="ipa-icon" style="background:#1877F2;"><img src="https://cdn.simpleicons.org/facebook/ffffff" alt="Facebook"></div>
            <div class="ipa-info">
              <div class="ipa-name">Facebook++</div>
              <div class="ipa-bundle">com.facebook.Facebook</div>
              <div class="ipa-meta">
                <span class="ipa-ver">v446.0</span>
                <span class="ipa-dl"><i class="fas fa-download"></i>3.2k</span>
                <span class="ipa-ver">244 MB · iOS 14–16</span>
              </div>
            </div>
            <div class="ipa-sign-count">3.2k<small>SIGNS</small></div>
          </div>

          <div class="ipa-card" style="background:rgba(255,122,0,0.03);border-left:2px solid rgba(255,122,0,0.4);">
            <div class="ipa-icon" style="background:linear-gradient(135deg,#0d1520,#1a2030);border:1px solid rgba(0,212,255,0.15);">
              <i class="fas fa-brain" style="font-size:22px;color:var(--cyan);"></i>
            </div>
            <div class="ipa-info">
              <div class="ipa-name">Recall AI <span class="ipa-badge ib-hot">HOT</span></div>
              <div class="ipa-bundle">ai.recall.app</div>
              <div class="ipa-meta">
                <span class="ipa-ver">v2.1.0</span>
                <span class="ipa-dl"><i class="fas fa-download"></i>2.2k</span>
                <span class="ipa-ver">180 MB · iOS 14–17</span>
              </div>
            </div>
            <div class="ipa-sign-count">2.2k<small>SIGNS</small></div>
          </div>

        </div>
        <div class="pagination">
          <div class="pg-info">No IPAs yet</div>
          <div class="pg-btns">
            <div class="pg-b active">1</div><div class="pg-b">2</div><div class="pg-b">3</div>
            <div class="pg-b">...</div><div class="pg-b">27</div><div class="pg-b">›</div>
          </div>
        </div>
      </div>

      <!-- DYLIBS TAB -->
      <div class="tab-content sc" id="tab-dylibs" style="margin-top:0;border-radius:0 0 4px 4px;border-top:none;">
        <div class="sc-head purple" style="border-radius:0;">
          <div class="sc-title"><i class="fas fa-code"></i> Dylib Releases</div>
          <div class="sc-meta">89 dylibs · 412k total injects</div>
        </div>

        <div class="dylib-card">
          <div class="dl-icon"><i class="fas fa-unlock-alt"></i></div>
          <div class="dl-info">
            <div class="dl-name">RecallUnlock.dylib v2.1</div>
            <div class="dl-target">ai.recall.app · subscription gate bypass</div>
            <div class="dl-tags">
              <span class="dl-tag" style="background:rgba(157,92,255,0.12);color:var(--purple);border:1px solid rgba(157,92,255,0.3);">Hook-based</span>
              <span class="dl-tag" style="background:rgba(0,232,122,0.1);color:var(--green);border:1px solid rgba(0,232,122,0.25);">Stable</span>
              <span class="dl-tag" style="background:rgba(0,212,255,0.08);color:var(--cyan);border:1px solid rgba(0,212,255,0.2);">ARM64</span>
              <span class="dl-tag" style="background:rgba(255,208,0,0.1);color:var(--yellow);border:1px solid rgba(255,208,0,0.2);">No Substrate</span>
            </div>
          </div>
          <div class="dl-stats">
            <div class="dl-injects">3,241<br><span class="dl-injects-lbl">injects</span></div>
            <div class="dl-success">98.7% success</div>
            <div class="dl-ios-compat">
              <span class="ios-dot">14</span><span class="ios-dot">15</span><span class="ios-dot">16</span><span class="ios-dot">17</span>
            </div>
          </div>
        </div>

        <div class="dylib-card">
          <div class="dl-icon orange"><i class="fas fa-ban"></i></div>
          <div class="dl-info">
            <div class="dl-name">NoSub.dylib v1.3</div>
            <div class="dl-target orange">Universal · StoreKit subscription bypass</div>
            <div class="dl-tags">
              <span class="dl-tag" style="background:rgba(255,122,0,0.12);color:var(--orange);border:1px solid rgba(255,122,0,0.3);">Sub Bypass</span>
              <span class="dl-tag" style="background:rgba(0,232,122,0.1);color:var(--green);border:1px solid rgba(0,232,122,0.25);">Universal</span>
              <span class="dl-tag" style="background:rgba(0,212,255,0.08);color:var(--cyan);border:1px solid rgba(0,212,255,0.2);">ARM64</span>
              <span class="dl-tag" style="background:rgba(255,208,0,0.1);color:var(--yellow);border:1px solid rgba(255,208,0,0.2);">No Substrate</span>
            </div>
          </div>
          <div class="dl-stats">
            <div class="dl-injects orange">8,712<br><span class="dl-injects-lbl">injects</span></div>
            <div class="dl-success">99.2% success</div>
            <div class="dl-ios-compat">
              <span class="ios-dot">14</span><span class="ios-dot">15</span><span class="ios-dot">16</span><span class="ios-dot">17</span>
            </div>
          </div>
        </div>

        <div class="dylib-card">
          <div class="dl-icon cyan"><i class="fas fa-music"></i></div>
          <div class="dl-info">
            <div class="dl-name">SpotifyPlus.dylib v3.2.1</div>
            <div class="dl-target" style="color:var(--cyan);">com.spotify.client · premium + lyrics + offline</div>
            <div class="dl-tags">
              <span class="dl-tag" style="background:rgba(0,212,255,0.1);color:var(--cyan);border:1px solid rgba(0,212,255,0.2);">MSHook</span>
              <span class="dl-tag" style="background:rgba(0,232,122,0.1);color:var(--green);border:1px solid rgba(0,232,122,0.25);">Stable</span>
              <span class="dl-tag" style="background:rgba(157,92,255,0.1);color:var(--purple);border:1px solid rgba(157,92,255,0.25);">ARM64</span>
            </div>
          </div>
          <div class="dl-stats">
            <div class="dl-injects" style="color:var(--cyan);">0<br><span class="dl-injects-lbl">injects</span></div>
            <div class="dl-success">99.8% success</div>
            <div class="dl-ios-compat">
              <span class="ios-dot">14</span><span class="ios-dot">15</span><span class="ios-dot">16</span><span class="ios-dot">17</span>
            </div>
          </div>
        </div>

        <div class="dylib-card">
          <div class="dl-icon" style="background:rgba(255,208,0,0.1);border-color:rgba(255,208,0,0.2);color:var(--yellow);"><i class="fas fa-film"></i></div>
          <div class="dl-info">
            <div class="dl-name">UnlimitedSkip.dylib v1.1.0</div>
            <div class="dl-target" style="color:var(--yellow);">com.spotify.client · removes skip limit entirely</div>
            <div class="dl-tags">
              <span class="dl-tag" style="background:rgba(255,208,0,0.1);color:var(--yellow);border:1px solid rgba(255,208,0,0.25);">RET Patch</span>
              <span class="dl-tag" style="background:rgba(0,232,122,0.1);color:var(--green);border:1px solid rgba(0,232,122,0.25);">Stable</span>
            </div>
          </div>
          <div class="dl-stats">
            <div class="dl-injects" style="color:var(--yellow);">6,100<br><span class="dl-injects-lbl">injects</span></div>
            <div class="dl-success">99.5% success</div>
            <div class="dl-ios-compat">
              <span class="ios-dot">14</span><span class="ios-dot">15</span><span class="ios-dot">16</span><span class="ios-dot">17</span>
            </div>
          </div>
        </div>

        <div class="dylib-card">
          <div class="dl-icon" style="background:rgba(255,51,51,0.1);border-color:rgba(255,51,51,0.2);color:var(--red);"><i class="fas fa-ad"></i></div>
          <div class="dl-info">
            <div class="dl-name">BlockAds.dylib v1.4.0</div>
            <div class="dl-target" style="color:var(--red);">Universal · removes audio + banner ads</div>
            <div class="dl-tags">
              <span class="dl-tag" style="background:rgba(255,51,51,0.1);color:var(--red);border:1px solid rgba(255,51,51,0.25);">Ad Block</span>
              <span class="dl-tag" style="background:rgba(0,232,122,0.1);color:var(--green);border:1px solid rgba(0,232,122,0.25);">Universal</span>
            </div>
          </div>
          <div class="dl-stats">
            <div class="dl-injects" style="color:var(--red);">9,840<br><span class="dl-injects-lbl">injects</span></div>
            <div class="dl-success">98.4% success</div>
            <div class="dl-ios-compat">
              <span class="ios-dot">14</span><span class="ios-dot">15</span><span class="ios-dot">16</span><span class="ios-dot">17</span>
            </div>
          </div>
        </div>

        <div class="pagination">
          <div class="pg-info">No dylibs yet</div>
          <div class="pg-btns">
            <div class="pg-b active">1</div><div class="pg-b">2</div><div class="pg-b">3</div>
            <div class="pg-b">...</div><div class="pg-b">18</div><div class="pg-b">›</div>
          </div>
        </div>
      </div>

      <!-- POSTS TAB -->
      <div class="tab-content sc" id="tab-posts" style="margin-top:0;border-radius:0 0 4px 4px;border-top:none;">
        <div class="sc-head cyan" style="border-radius:0;">
          <div class="sc-title"><i class="fas fa-comments"></i> Recent Posts</div>
          <div class="sc-meta">6,119 total · 5.6 posts/day avg</div>
        </div>
        <div class="post-row">
          <div class="post-dot" style="background:var(--cyan);"></div>
          <div class="post-content">
            <div class="post-thread">Recall AI v2.1.0 — Fully tweaked + Unlimited mode [OP]</div>
            <div class="post-excerpt">Recall AI v2.1.0 is finally here — this is the most feature-complete build I've put out. Fully tweaked with unlimited mode enabled, all paywalls stripped, and a bunch of new injection hooks for the updated binary.</div>
            <div class="post-meta-row">
              <span class="post-board-tag">IPA Releases</span>
              <span><i class="fas fa-clock"></i> Today · 12:04 AM</span>
              <span><i class="fas fa-eye"></i> 2,241</span>
              <span><i class="fas fa-thumbs-up"></i> 74 likes</span>
            </div>
          </div>
        </div>
        <div class="post-row">
          <div class="post-dot" style="background:var(--orange);"></div>
          <div class="post-content">
            <div class="post-thread">Spotify++ v8.9.12 — Premium Unlock, No Ads, Offline DL</div>
            <div class="post-excerpt">Verified on iPhone 14 Pro (iOS 17.4) and iPhone 12 (iOS 16.7.6). No crashes. Lyrics fully functional. SpotifyPlus.dylib v3.2.1 patches the lyrics endpoint...</div>
            <div class="post-meta-row">
              <span class="post-board-tag">IPA Releases</span>
              <span><i class="fas fa-clock"></i> Feb 14</span>
              <span><i class="fas fa-eye"></i> 3,841</span>
              <span><i class="fas fa-thumbs-up"></i> 44 likes</span>
            </div>
          </div>
        </div>
        <div class="post-row">
          <div class="post-dot" style="background:var(--purple);"></div>
          <div class="post-content">
            <div class="post-thread">TrustCore v4.2 compatibility — my testing notes</div>
            <div class="post-excerpt">Ran through the full test suite on v4.2 this morning. All 214 of my builds passing clean. The entitlement preservation fix is huge for push-dependent apps...</div>
            <div class="post-meta-row">
              <span class="post-board-tag">News & Updates</span>
              <span><i class="fas fa-clock"></i> Feb 17</span>
              <span><i class="fas fa-eye"></i> 1,092</span>
              <span><i class="fas fa-thumbs-up"></i> 31 likes</span>
            </div>
          </div>
        </div>
        <div class="post-row">
          <div class="post-dot" style="background:var(--green);"></div>
          <div class="post-content">
            <div class="post-thread">RE: App crashes on iOS 16.7.8 after latest sign</div>
            <div class="post-excerpt">Hey @n3wbie_42 — this is likely an entitlement mismatch. Try re-signing with the "Strip Entitlements" option enabled in the signing page. That should resolve it...</div>
            <div class="post-meta-row">
              <span class="post-board-tag">Support & Help</span>
              <span><i class="fas fa-clock"></i> Today · 2:30 AM</span>
              <span><i class="fas fa-eye"></i> 143</span>
              <span><i class="fas fa-thumbs-up"></i> 8 likes</span>
            </div>
          </div>
        </div>
        <div class="pagination">
          <div class="pg-info">No posts yet</div>
          <div class="pg-btns">
            <div class="pg-b active">1</div><div class="pg-b">2</div>
            <div class="pg-b">...</div><div class="pg-b">612</div><div class="pg-b">›</div>
          </div>
        </div>
      </div>

      <!-- ACTIVITY TAB -->
      <div class="tab-content sc" id="tab-activity" style="margin-top:0;border-radius:0 0 4px 4px;border-top:none;">
        <div class="sc-head" style="border-radius:0;">
          <div class="sc-title"><i class="fas fa-history"></i> Recent Activity</div>
          <div class="sc-meta">Last 30 days</div>
        </div>
        <div class="activity-item">
          <div class="activity-icon-wrap act-upload"><i class="fas fa-box-open"></i></div>
          <div class="activity-body">
            <div class="activity-text">Uploaded <strong>Recall AI v2.1.0</strong> to IPA Releases · 88 replies, 2.2k views</div>
            <div class="activity-time">Today · 12:04 AM</div>
          </div>
        </div>
        <div class="activity-item">
          <div class="activity-icon-wrap act-post"><i class="fas fa-comment"></i></div>
          <div class="activity-body">
            <div class="activity-text">Replied to <strong>App crashes on iOS 16.7.8</strong> in Support & Help</div>
            <div class="activity-time">Today · 2:30 AM</div>
          </div>
        </div>
        <div class="activity-item">
          <div class="activity-icon-wrap act-rep"><i class="fas fa-thumbs-up"></i></div>
          <div class="activity-body">
            <div class="activity-text">Received <strong>+12 reputation</strong> on Spotify++ release post</div>
            <div class="activity-time">Feb 14</div>
          </div>
        </div>
        <div class="activity-item">
          <div class="activity-icon-wrap act-inject"><i class="fas fa-syringe"></i></div>
          <div class="activity-body">
            <div class="activity-text">Published <strong>RecallUnlock.dylib v2.1</strong> — 3,241 injects to date</div>
            <div class="activity-time">Feb 14</div>
          </div>
        </div>
        <div class="activity-item">
          <div class="activity-icon-wrap act-upload"><i class="fas fa-box-open"></i></div>
          <div class="activity-body">
            <div class="activity-text">Uploaded <strong>Spotify++ v8.9.12</strong> to IPA Releases · 3.8k views</div>
            <div class="activity-time">Feb 14</div>
          </div>
        </div>
        <div class="activity-item">
          <div class="activity-icon-wrap act-sign"><i class="fas fa-pen-nib"></i></div>
          <div class="activity-body">
            <div class="activity-text">Signed <strong>Discord++ v222.0</strong> via Priority queue · 33s</div>
            <div class="activity-time">Feb 12</div>
          </div>
        </div>
        <div class="activity-item">
          <div class="activity-icon-wrap act-inject"><i class="fas fa-syringe"></i></div>
          <div class="activity-body">
            <div class="activity-text">Updated <strong>NoSub.dylib v1.3</strong> with improved StoreKit hook</div>
            <div class="activity-time">Feb 10</div>
          </div>
        </div>
        <div class="activity-item">
          <div class="activity-icon-wrap act-rep"><i class="fas fa-shield-alt"></i></div>
          <div class="activity-body">
            <div class="activity-text">Received <strong>vouch</strong> from ZEFv — "Hook offsets always accurate"</div>
            <div class="activity-time">Feb 8</div>
          </div>
        </div>
      </div>

      <!-- STATS TAB -->
      <div class="tab-content sc" id="tab-stats" style="margin-top:0;border-radius:0 0 4px 4px;border-top:none;">
        <div class="sc-head" style="border-left-color:var(--green);border-radius:0;">
          <div class="sc-title"><i class="fas fa-chart-bar" style="color:var(--green);"></i> Member Statistics</div>
        </div>
        <div class="stats-big-grid">
          <div class="stat-big-cell">
            <div class="stat-big-lbl">Total IPAs</div>
            <div class="stat-big-num" style="color:var(--yellow);">214</div>
            <div class="stat-big-sub">99.1% success rate</div>
          </div>
          <div class="stat-big-cell">
            <div class="stat-big-lbl">Total Signs</div>
            <div class="stat-big-num" style="color:var(--orange);">184k</div>
            <div class="stat-big-sub">Across all releases</div>
          </div>
          <div class="stat-big-cell">
            <div class="stat-big-lbl">Dylibs Built</div>
            <div class="stat-big-num" style="color:var(--purple);">89</div>
            <div class="stat-big-sub">412k total injects</div>
          </div>
          <div class="stat-big-cell">
            <div class="stat-big-lbl">Forum Posts</div>
            <div class="stat-big-num" style="color:var(--cyan);">6,119</div>
            <div class="stat-big-sub">5.6 posts/day avg</div>
          </div>
          <div class="stat-big-cell">
            <div class="stat-big-lbl">Reputation</div>
            <div class="stat-big-num" style="color:var(--green);">+841</div>
            <div class="stat-big-sub">Top 5 on forum</div>
          </div>
          <div class="stat-big-cell">
            <div class="stat-big-lbl">Likes Received</div>
            <div class="stat-big-num" style="color:var(--pink);">2,841</div>
            <div class="stat-big-sub">On 6,119 posts</div>
          </div>
        </div>

        <div class="sc-head" style="border-left-color:var(--orange);margin-top:12px;border-radius:0;">
          <div class="sc-title"><i class="fas fa-chart-line" style="color:var(--orange);"></i> Signs by Category</div>
        </div>
        <div class="stat-bar-row">
          <div class="stat-bar-header">
            <span class="stat-bar-label">Social Apps (Instagram, Snapchat, TikTok...)</span>
            <span class="stat-bar-val" style="color:var(--pink);">82.4k</span>
          </div>
          <div class="stat-track"><div class="stat-fill" style="width:45%;background:linear-gradient(90deg,var(--pink),var(--purple));"></div></div>
        </div>
        <div class="stat-bar-row">
          <div class="stat-bar-header">
            <span class="stat-bar-label">Media Apps (Spotify, YouTube Music...)</span>
            <span class="stat-bar-val" style="color:var(--green);">64.2k</span>
          </div>
          <div class="stat-track"><div class="stat-fill" style="width:35%;background:linear-gradient(90deg,var(--green),var(--cyan));"></div></div>
        </div>
        <div class="stat-bar-row">
          <div class="stat-bar-header">
            <span class="stat-bar-label">Communication (Discord, WhatsApp...)</span>
            <span class="stat-bar-val" style="color:var(--cyan);">24.8k</span>
          </div>
          <div class="stat-track"><div class="stat-fill" style="width:14%;background:var(--cyan);"></div></div>
        </div>
        <div class="stat-bar-row">
          <div class="stat-bar-header">
            <span class="stat-bar-label">AI Tools (Recall AI, etc.)</span>
            <span class="stat-bar-val" style="color:var(--orange);">12.6k</span>
          </div>
          <div class="stat-track"><div class="stat-fill" style="width:7%;background:var(--orange);"></div></div>
        </div>
      </div>

      <!-- FRIENDS TAB -->
      <div class="tab-content sc" id="tab-friends" style="margin-top:0;border-radius:0 0 4px 4px;border-top:none;">
        <div class="sc-head" style="border-radius:0;">
          <div class="sc-title"><i class="fas fa-users"></i> Friends</div>
          <div class="sc-meta">88 friends</div>
        </div>
        <div class="friends-grid">
          <div class="friend-card">
            <div class="friend-av" style="border-color:var(--orange);background:linear-gradient(135deg,#1a0e00,#2a1800);color:var(--orange);">MA</div>
            <div class="friend-name" style="color:var(--orange);">Marshall</div>
            <div class="friend-role">Owner</div>
          </div>
          <div class="friend-card">
            <div class="friend-av" style="border-color:var(--cyan);background:linear-gradient(135deg,#001a2a,#002840);color:var(--cyan);">ZE</div>
            <div class="friend-name" style="color:var(--cyan);">ZEFv</div>
            <div class="friend-role">Developer</div>
          </div>
          <div class="friend-card">
            <div class="friend-av" style="border-color:var(--green);background:linear-gradient(135deg,#001a0e,#002815);color:var(--green);">SI</div>
            <div class="friend-name" style="color:var(--green);">sipx</div>
            <div class="friend-role">Moderator</div>
          </div>
          <div class="friend-card">
            <div class="friend-av" style="border-color:var(--pink);background:linear-gradient(135deg,#1a0014,#2a0020);color:var(--pink);">xX</div>
            <div class="friend-name" style="color:var(--pink);">xXDarkXx</div>
            <div class="friend-role">VIP Member</div>
          </div>
          <div class="friend-card">
            <div class="friend-av" style="border-color:var(--dim);background:var(--card2);color:var(--dim);">Tr</div>
            <div class="friend-name">Tr0jan</div>
            <div class="friend-role">Member</div>
          </div>
          <div class="friend-card">
            <div class="friend-av" style="border-color:var(--yellow);background:linear-gradient(135deg,#1a1200,#2a1e00);color:var(--yellow);">iP</div>
            <div class="friend-name" style="color:var(--yellow);">iPwned</div>
            <div class="friend-role">Premium</div>
          </div>
          <div class="friend-card">
            <div class="friend-av" style="border-color:var(--dim);background:var(--card2);color:var(--dim);">Pr</div>
            <div class="friend-name">Prism</div>
            <div class="friend-role">Premium</div>
          </div>
          <div class="friend-card">
            <div class="friend-av" style="border-color:var(--dim);background:var(--card2);color:var(--dim);">By</div>
            <div class="friend-name">Byte</div>
            <div class="friend-role">Member</div>
          </div>
        </div>
        <div class="pagination">
          <div class="pg-info">No friends yet</div>
          <div class="pg-btns">
            <div class="pg-b active">1</div><div class="pg-b">2</div>
            <div class="pg-b">...</div><div class="pg-b">11</div><div class="pg-b">›</div>
          </div>
        </div>
      </div>

      <!-- VOUCHES TAB -->
      <!-- VOUCHES TAB -->
      <div class="tab-content sc" id="tab-vouches" style="margin-top:0;border-radius:0 0 4px 4px;border-top:none;">
        <div class="sc-head green" style="border-radius:0;">
          <div class="sc-title"><i class="fas fa-shield-alt"></i> Vouches Received</div>
          <div class="sc-meta">47 total vouches</div>
        </div>

        <!-- Vouch summary bar -->
        <div style="padding:16px 18px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;border-bottom:1px solid var(--border2);background:rgba(0,232,122,0.02);">
          <div style="text-align:center;">
            <div style="font-family:'Oswald',sans-serif;font-size:22px;font-weight:700;color:var(--green);">47</div>
            <div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-top:2px;">Total Vouches</div>
          </div>
          <div style="text-align:center;">
            <div style="font-family:'Oswald',sans-serif;font-size:22px;font-weight:700;color:var(--yellow);">4.9<span style="font-size:14px;color:var(--dim);">/5</span></div>
            <div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-top:2px;">Avg Rating</div>
          </div>
          <div style="text-align:center;">
            <div style="font-family:'Oswald',sans-serif;font-size:22px;font-weight:700;color:var(--cyan);">38</div>
            <div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-top:2px;">5-Star Vouches</div>
          </div>
          <div style="text-align:center;">
            <div style="font-family:'Oswald',sans-serif;font-size:22px;font-weight:700;color:var(--orange);">#3</div>
            <div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-top:2px;">Platform Rank</div>
          </div>
        </div>

        <!-- Tag cloud -->
        <div style="padding:12px 18px;display:flex;flex-wrap:wrap;gap:7px;border-bottom:1px solid var(--border2);">
          <span style="font-size:10px;color:var(--dim);align-self:center;margin-right:4px;text-transform:uppercase;letter-spacing:1px;">Top Tags:</span>
          <span style="background:rgba(0,232,122,0.1);border:1px solid rgba(0,232,122,0.25);color:var(--green);padding:3px 10px;font-size:11px;font-weight:600;border-radius:2px;"><i class="fas fa-check-circle" style="margin-right:4px;"></i>Reliable Builder <span style="opacity:0.6;">(31)</span></span>
          <span style="background:rgba(0,212,255,0.1);border:1px solid rgba(0,212,255,0.2);color:var(--cyan);padding:3px 10px;font-size:11px;font-weight:600;border-radius:2px;"><i class="fas fa-shield-alt" style="margin-right:4px;"></i>Trusted Encoder <span style="opacity:0.6;">(28)</span></span>
          <span style="background:rgba(255,208,0,0.1);border:1px solid rgba(255,208,0,0.2);color:var(--yellow);padding:3px 10px;font-size:11px;font-weight:600;border-radius:2px;"><i class="fas fa-star" style="margin-right:4px;"></i>Great Support <span style="opacity:0.6;">(19)</span></span>
          <span style="background:rgba(157,92,255,0.1);border:1px solid rgba(157,92,255,0.2);color:var(--purple);padding:3px 10px;font-size:11px;font-weight:600;border-radius:2px;"><i class="fas fa-code" style="margin-right:4px;"></i>Expert Tweaker <span style="opacity:0.6;">(17)</span></span>
          <span style="background:rgba(255,122,0,0.1);border:1px solid rgba(255,122,0,0.2);color:var(--orange);padding:3px 10px;font-size:11px;font-weight:600;border-radius:2px;"><i class="fas fa-bolt" style="margin-right:4px;"></i>Fast Delivery <span style="opacity:0.6;">(14)</span></span>
          <span style="background:rgba(255,61,205,0.1);border:1px solid rgba(255,61,205,0.2);color:var(--pink);padding:3px 10px;font-size:11px;font-weight:600;border-radius:2px;"><i class="fas fa-gem" style="margin-right:4px;"></i>VIP Quality <span style="opacity:0.6;">(11)</span></span>
        </div>

        <!-- Vouch rows -->
        <div class="vouch-row" style="padding:16px 18px;">
          <div class="vouch-av" style="border-color:var(--cyan);background:rgba(0,212,255,0.06);color:var(--cyan);">ZE</div>
          <div class="vouch-body">
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:4px;">
              <span class="vouch-name" style="color:var(--cyan);">ZEFv</span>
              <span style="font-size:10px;color:var(--dim);">Developer</span>
              <span style="display:flex;gap:2px;margin-left:4px;">
                <i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i>
              </span>
            </div>
            <div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px;">
              <span style="background:rgba(0,232,122,0.08);border:1px solid rgba(0,232,122,0.2);color:var(--green);padding:1px 7px;font-size:10px;">Reliable Builder</span>
              <span style="background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.15);color:var(--cyan);padding:1px 7px;font-size:10px;">Trusted Encoder</span>
            </div>
            <div class="vouch-text">"Hook offsets always accurate, binaries tested properly before release. The most reliable encoder on the platform."</div>
          </div>
          <div class="vouch-time">Feb 15</div>
        </div>

        <div class="vouch-row" style="padding:16px 18px;">
          <div class="vouch-av" style="border-color:var(--orange);background:rgba(255,122,0,0.06);color:var(--orange);">MA</div>
          <div class="vouch-body">
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:4px;">
              <span class="vouch-name" style="color:var(--orange);">Marshall</span>
              <span style="font-size:10px;color:var(--dim);">Owner</span>
              <span style="display:flex;gap:2px;margin-left:4px;">
                <i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i>
              </span>
            </div>
            <div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px;">
              <span style="background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.15);color:var(--cyan);padding:1px 7px;font-size:10px;">Trusted Encoder</span>
              <span style="background:rgba(157,92,255,0.08);border:1px solid rgba(157,92,255,0.15);color:var(--purple);padding:1px 7px;font-size:10px;">Expert Tweaker</span>
            </div>
            <div class="vouch-text">"Consistently delivers quality builds with detailed notes. One of the most valuable contributors to the library."</div>
          </div>
          <div class="vouch-time">Feb 10</div>
        </div>

        <div class="vouch-row" style="padding:16px 18px;">
          <div class="vouch-av" style="border-color:var(--green);background:rgba(0,232,122,0.06);color:var(--green);">SI</div>
          <div class="vouch-body">
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:4px;">
              <span class="vouch-name" style="color:var(--green);">sipx</span>
              <span style="font-size:10px;color:var(--dim);">Moderator</span>
              <span style="display:flex;gap:2px;margin-left:4px;">
                <i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i>
              </span>
            </div>
            <div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px;">
              <span style="background:rgba(0,232,122,0.08);border:1px solid rgba(0,232,122,0.2);color:var(--green);padding:1px 7px;font-size:10px;">Reliable Builder</span>
              <span style="background:rgba(255,208,0,0.08);border:1px solid rgba(255,208,0,0.15);color:var(--yellow);padding:1px 7px;font-size:10px;">Great Support</span>
            </div>
            <div class="vouch-text">"All 214 uploads pass our malware scanner clean. Always provides full disclosure of injected dylibs. Trusted."</div>
          </div>
          <div class="vouch-time">Jan 28</div>
        </div>

        <div class="vouch-row" style="padding:16px 18px;">
          <div class="vouch-av" style="border-color:var(--pink);background:rgba(255,61,205,0.06);color:var(--pink);">xX</div>
          <div class="vouch-body">
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:4px;">
              <span class="vouch-name" style="color:var(--pink);">xXDarkXx</span>
              <span style="font-size:10px;color:var(--dim);">VIP</span>
              <span style="display:flex;gap:2px;margin-left:4px;">
                <i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="far fa-star" style="color:var(--yellow);font-size:10px;opacity:0.4;"></i>
              </span>
            </div>
            <div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px;">
              <span style="background:rgba(255,122,0,0.08);border:1px solid rgba(255,122,0,0.15);color:var(--orange);padding:1px 7px;font-size:10px;">Fast Delivery</span>
              <span style="background:rgba(255,61,205,0.08);border:1px solid rgba(255,61,205,0.15);color:var(--pink);padding:1px 7px;font-size:10px;">VIP Quality</span>
            </div>
            <div class="vouch-text">"Never had a crash from any of their IPAs. The dylib docs make it easy to understand what's being injected."</div>
          </div>
          <div class="vouch-time">Jan 20</div>
        </div>

        <div class="vouch-row" style="padding:16px 18px;">
          <div class="vouch-av" style="border-color:var(--dim);background:var(--card2);color:var(--dim);">Tr</div>
          <div class="vouch-body">
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:4px;">
              <span class="vouch-name">Tr0jan</span>
              <span style="font-size:10px;color:var(--dim);">Member</span>
              <span style="display:flex;gap:2px;margin-left:4px;">
                <i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i>
              </span>
            </div>
            <div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px;">
              <span style="background:rgba(255,208,0,0.08);border:1px solid rgba(255,208,0,0.15);color:var(--yellow);padding:1px 7px;font-size:10px;">Great Support</span>
            </div>
            <div class="vouch-text">"Replied to my support post within an hour with a fix. Signed and working within minutes. 10/10."</div>
          </div>
          <div class="vouch-time">Jan 14</div>
        </div>

        <div class="pagination">
          <div class="pg-info">No vouches yet</div>
          <div class="pg-btns">
            <div class="pg-b active">1</div><div class="pg-b">2</div><div class="pg-b">3</div><div class="pg-b">›</div>
          </div>
        </div>
      </div>

      <!-- REPUTATION TAB -->
      <div class="tab-content sc" id="tab-reputation" style="margin-top:0;border-radius:0 0 4px 4px;border-top:none;">
        <div class="sc-head" style="border-radius:0;border-left:3px solid var(--green);">
          <div class="sc-title"><i class="fas fa-star" style="color:var(--green);"></i> Reputation History</div>
          <div class="sc-meta" style="color:var(--green);">+841 total</div>
        </div>

        <!-- Rep overview -->
        <div style="padding:16px 18px;border-bottom:1px solid var(--border2);display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start;">
          <div>
            <!-- Big rep score -->
            <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:12px;">
              <div style="font-family:'Oswald',sans-serif;font-size:42px;font-weight:700;color:var(--green);line-height:1;">+841</div>
              <div>
                <div style="font-size:12px;color:#fff;font-weight:600;margin-bottom:2px;">LEGENDARY TIER</div>
                <div style="font-size:10px;color:var(--dim);">159 rep until <span style="color:var(--yellow);">Mythic</span></div>
              </div>
            </div>
            <!-- Tier bar -->
            <div style="margin-bottom:8px;">
              <div style="display:flex;justify-content:space-between;font-size:10px;color:var(--dim);margin-bottom:5px;">
                <span>Legendary (600)</span><span>Progress to Mythic (1000)</span>
              </div>
              <div style="height:6px;background:var(--border);border-radius:3px;overflow:hidden;">
                <div style="height:100%;width:60%;background:linear-gradient(90deg,var(--green),var(--cyan));border-radius:3px;transition:width 0.4s;"></div>
              </div>
            </div>
            <!-- Tier track -->
            <div style="display:flex;gap:0;margin-top:10px;">
              <div style="flex:1;padding:4px 6px;text-align:center;font-size:9px;background:rgba(255,122,0,0.12);border:1px solid rgba(255,122,0,0.2);color:var(--orange);font-weight:600;border-radius:2px 0 0 2px;">MEMBER<br><span style="font-weight:400;opacity:0.7;">0+</span></div>
              <div style="flex:1;padding:4px 6px;text-align:center;font-size:9px;background:rgba(0,212,255,0.1);border:1px solid rgba(0,212,255,0.15);color:var(--cyan);font-weight:600;border-left:none;">TRUSTED<br><span style="font-weight:400;opacity:0.7;">100+</span></div>
              <div style="flex:1;padding:4px 6px;text-align:center;font-size:9px;background:rgba(157,92,255,0.12);border:1px solid rgba(157,92,255,0.2);color:var(--purple);font-weight:600;border-left:none;">VETERAN<br><span style="font-weight:400;opacity:0.7;">300+</span></div>
              <div style="flex:1;padding:4px 6px;text-align:center;font-size:9px;background:rgba(0,232,122,0.15);border:1px solid rgba(0,232,122,0.3);color:var(--green);font-weight:700;border-left:none;position:relative;">LEGENDARY<br><span style="font-weight:400;opacity:0.7;">600+</span><div style="position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:6px;height:6px;background:var(--green);border-radius:50%;"></div></div>
              <div style="flex:1;padding:4px 6px;text-align:center;font-size:9px;background:rgba(255,208,0,0.05);border:1px solid rgba(255,208,0,0.1);color:rgba(255,208,0,0.4);font-weight:600;border-left:none;border-radius:0 2px 2px 0;">MYTHIC<br><span style="font-weight:400;opacity:0.7;">1000+</span></div>
            </div>
          </div>
          <!-- Rep split -->
          <div style="min-width:140px;">
            <div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;">Breakdown</div>
            <div style="display:flex;flex-direction:column;gap:7px;">
              <div style="display:flex;justify-content:space-between;align-items:center;font-size:12px;">
                <span style="color:var(--green);"><i class="fas fa-plus-circle" style="margin-right:5px;"></i>Positive</span>
                <span style="font-weight:700;color:var(--green);">+862</span>
              </div>
              <div style="display:flex;justify-content:space-between;align-items:center;font-size:12px;">
                <span style="color:var(--red);"><i class="fas fa-minus-circle" style="margin-right:5px;"></i>Negative</span>
                <span style="font-weight:700;color:var(--red);">−21</span>
              </div>
              <div style="height:1px;background:var(--border2);margin:2px 0;"></div>
              <div style="display:flex;justify-content:space-between;align-items:center;font-size:12px;">
                <span style="color:var(--dim);">Net</span>
                <span style="font-weight:700;color:var(--green);">+841</span>
              </div>
              <div style="height:1px;background:var(--border2);margin:2px 0;"></div>
              <div style="display:flex;justify-content:space-between;align-items:center;font-size:12px;">
                <span style="color:var(--dim);">Givers</span>
                <span style="font-weight:600;color:#fff;">284</span>
              </div>
              <div style="display:flex;justify-content:space-between;align-items:center;font-size:12px;">
                <span style="color:var(--dim);">This month</span>
                <span style="font-weight:600;color:var(--cyan);">+62</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Rep feed -->
        <div style="padding:12px 18px 6px;display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--border2);">
          <div style="font-size:11px;color:var(--dim);">Filter:</div>
          <div style="display:flex;gap:6px;">
            <button style="background:rgba(0,232,122,0.1);border:1px solid rgba(0,232,122,0.25);color:var(--green);padding:3px 10px;font-size:11px;font-weight:600;cursor:pointer;">All</button>
            <button style="background:transparent;border:1px solid var(--border);color:var(--dim);padding:3px 10px;font-size:11px;cursor:pointer;">Positive</button>
            <button style="background:transparent;border:1px solid var(--border);color:var(--dim);padding:3px 10px;font-size:11px;cursor:pointer;">Negative</button>
          </div>
        </div>

        <!-- Rep entries -->
        <div style="display:flex;flex-direction:column;">
          <!-- Positive entries -->
          <div style="display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--border2);">
            <div style="width:32px;height:32px;border-radius:50%;background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--cyan);">ZE</div>
            <div>
              <div style="font-size:13px;color:#fff;font-weight:600;margin-bottom:2px;"><span style="color:var(--cyan);">ZEFv</span> <span style="font-size:10px;font-weight:400;color:var(--dim);">Developer · Feb 15</span></div>
              <div style="font-size:12px;color:var(--grey);">+Rep for Spotify++ v8.9.12 — flawless build, full dylib transparency, hooks properly obfuscated</div>
              <div style="display:flex;gap:6px;margin-top:5px;">
                <span style="background:rgba(0,232,122,0.08);border:1px solid rgba(0,232,122,0.2);color:var(--green);padding:1px 7px;font-size:10px;border-radius:2px;">IPA Quality</span>
                <span style="background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.15);color:var(--cyan);padding:1px 7px;font-size:10px;border-radius:2px;">Encoder Work</span>
              </div>
            </div>
            <div style="text-align:right;">
              <div style="font-family:'Oswald',sans-serif;font-size:16px;font-weight:700;color:var(--green);">+5</div>
              <div style="font-size:9px;color:var(--dim);">reputation</div>
            </div>
          </div>

          <div style="display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--border2);">
            <div style="width:32px;height:32px;border-radius:50%;background:rgba(255,122,0,0.08);border:1px solid rgba(255,122,0,0.2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--orange);">MA</div>
            <div>
              <div style="font-size:13px;color:#fff;font-weight:600;margin-bottom:2px;"><span style="color:var(--orange);">Marshall</span> <span style="font-size:10px;font-weight:400;color:var(--dim);">Owner · Feb 10</span></div>
              <div style="font-size:12px;color:var(--grey);">Reward for 200+ IPA milestone — library quality significantly improved under this encoder's contributions</div>
              <div style="display:flex;gap:6px;margin-top:5px;">
                <span style="background:rgba(255,122,0,0.08);border:1px solid rgba(255,122,0,0.15);color:var(--orange);padding:1px 7px;font-size:10px;border-radius:2px;">Milestone</span>
                <span style="background:rgba(157,92,255,0.08);border:1px solid rgba(157,92,255,0.15);color:var(--purple);padding:1px 7px;font-size:10px;border-radius:2px;">Staff Award</span>
              </div>
            </div>
            <div style="text-align:right;">
              <div style="font-family:'Oswald',sans-serif;font-size:16px;font-weight:700;color:var(--green);">+25</div>
              <div style="font-size:9px;color:var(--dim);">reputation</div>
            </div>
          </div>

          <div style="display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--border2);">
            <div style="width:32px;height:32px;border-radius:50%;background:rgba(0,232,122,0.08);border:1px solid rgba(0,232,122,0.2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--green);">SI</div>
            <div>
              <div style="font-size:13px;color:#fff;font-weight:600;margin-bottom:2px;"><span style="color:var(--green);">sipx</span> <span style="font-size:10px;font-weight:400;color:var(--dim);">Moderator · Jan 28</span></div>
              <div style="font-size:12px;color:var(--grey);">Excellent community support — helped 12 users resolve install issues in a single thread</div>
              <div style="display:flex;gap:6px;margin-top:5px;">
                <span style="background:rgba(0,232,122,0.08);border:1px solid rgba(0,232,122,0.2);color:var(--green);padding:1px 7px;font-size:10px;border-radius:2px;">Community Help</span>
              </div>
            </div>
            <div style="text-align:right;">
              <div style="font-family:'Oswald',sans-serif;font-size:16px;font-weight:700;color:var(--green);">+3</div>
              <div style="font-size:9px;color:var(--dim);">reputation</div>
            </div>
          </div>

          <div style="display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--border2);">
            <div style="width:32px;height:32px;border-radius:50%;background:rgba(255,61,205,0.08);border:1px solid rgba(255,61,205,0.2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--pink);">xX</div>
            <div>
              <div style="font-size:13px;color:#fff;font-weight:600;margin-bottom:2px;"><span style="color:var(--pink);">xXDarkXx</span> <span style="font-size:10px;font-weight:400;color:var(--dim);">VIP · Jan 20</span></div>
              <div style="font-size:12px;color:var(--grey);">Discord++ update came through when every other encoder's build was crashing on 17.4</div>
              <div style="display:flex;gap:6px;margin-top:5px;">
                <span style="background:rgba(255,122,0,0.08);border:1px solid rgba(255,122,0,0.15);color:var(--orange);padding:1px 7px;font-size:10px;border-radius:2px;">IPA Quality</span>
              </div>
            </div>
            <div style="text-align:right;">
              <div style="font-family:'Oswald',sans-serif;font-size:16px;font-weight:700;color:var(--green);">+2</div>
              <div style="font-size:9px;color:var(--dim);">reputation</div>
            </div>
          </div>

          <!-- One negative -->
          <div style="display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--border2);background:rgba(255,51,51,0.025);">
            <div style="width:32px;height:32px;border-radius:50%;background:rgba(136,153,170,0.08);border:1px solid rgba(136,153,170,0.2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--dim);">??</div>
            <div>
              <div style="font-size:13px;color:#fff;font-weight:600;margin-bottom:2px;"><span style="color:var(--dim);">[Anonymous]</span> <span style="font-size:10px;font-weight:400;color:var(--dim);">Member · Jan 11</span></div>
              <div style="font-size:12px;color:var(--grey);">Build crashed on iPhone 12 iOS 16.6 — acknowledged and fixed next release</div>
              <div style="display:flex;gap:6px;margin-top:5px;">
                <span style="background:rgba(255,51,51,0.08);border:1px solid rgba(255,51,51,0.2);color:var(--red);padding:1px 7px;font-size:10px;border-radius:2px;">Build Issue</span>
              </div>
            </div>
            <div style="text-align:right;">
              <div style="font-family:'Oswald',sans-serif;font-size:16px;font-weight:700;color:var(--red);">−1</div>
              <div style="font-size:9px;color:var(--dim);">reputation</div>
            </div>
          </div>

          <div style="display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--border2);">
            <div style="width:32px;height:32px;border-radius:50%;background:rgba(255,208,0,0.08);border:1px solid rgba(255,208,0,0.2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--yellow);">n3</div>
            <div>
              <div style="font-size:13px;color:#fff;font-weight:600;margin-bottom:2px;"><span style="color:var(--yellow);">n3wbie_42</span> <span style="font-size:10px;font-weight:400;color:var(--dim);">Member · Jan 8</span></div>
              <div style="font-size:12px;color:var(--grey);">First IPA I ever installed worked on first try. Really clear instructions in the thread too.</div>
              <div style="display:flex;gap:6px;margin-top:5px;">
                <span style="background:rgba(0,232,122,0.08);border:1px solid rgba(0,232,122,0.2);color:var(--green);padding:1px 7px;font-size:10px;border-radius:2px;">Helpful</span>
              </div>
            </div>
            <div style="text-align:right;">
              <div style="font-family:'Oswald',sans-serif;font-size:16px;font-weight:700;color:var(--green);">+1</div>
              <div style="font-size:9px;color:var(--dim);">reputation</div>
            </div>
          </div>
        </div>

        <div class="pagination">
          <div class="pg-info">No entries yet</div>
          <div class="pg-btns">
            <div class="pg-b active">1</div><div class="pg-b">2</div><div class="pg-b">3</div><div class="pg-b">...</div><div class="pg-b">48</div><div class="pg-b">›</div>
          </div>
        </div>
      </div>

      <!-- ACHIEVEMENTS TAB -->
      <div class="tab-content sc" id="tab-achievements" style="margin-top:0;border-radius:0 0 4px 4px;border-top:none;">
        <div class="sc-head yellow" style="border-radius:0;">
          <div class="sc-title"><i class="fas fa-trophy"></i> Achievements</div>
          <div class="sc-meta">15 / 40 unlocked · 780 XP earned</div>
        </div>

        <!-- XP progress -->
        <div style="padding:16px 18px;border-bottom:1px solid var(--border2);">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
            <div>
              <span style="font-family:'Oswald',sans-serif;font-size:18px;font-weight:700;color:var(--yellow);">780 XP</span>
              <span style="font-size:12px;color:var(--dim);margin-left:8px;">Level 14 · <span style="color:var(--yellow);">Gold Encoder</span></span>
            </div>
            <div style="font-size:11px;color:var(--dim);">220 XP to Level 15</div>
          </div>
          <div style="height:8px;background:var(--border);border-radius:4px;overflow:hidden;">
            <div style="height:100%;width:78%;background:linear-gradient(90deg,var(--yellow),var(--orange));border-radius:4px;"></div>
          </div>
          <div style="display:flex;justify-content:space-between;font-size:10px;color:var(--dim);margin-top:5px;"><span>Level 14 (760 XP)</span><span>Level 15 (1000 XP)</span></div>
        </div>

        <!-- Category: Encoder -->
        <div style="padding:14px 18px 6px;"><div style="font-size:11px;color:var(--orange);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:12px;"><i class="fas fa-box-open"></i> Encoder Achievements</div>
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:18px;">

          <div id="achiev-century-builder" style="background:rgba(255,208,0,0.06);border:1px solid rgba(255,208,0,0.25);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;filter:drop-shadow(0 0 6px rgba(255,208,0,0.4));">🏆</div>
            <div>
              <div style="font-size:12px;font-weight:700;color:#fff;margin-bottom:2px;">Century Builder</div>
              <div style="font-size:10px;color:var(--dim);margin-bottom:6px;">Release 100 IPAs</div>
              <div style="height:3px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:100%;background:var(--yellow);border-radius:2px;"></div></div>
              <div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:3px;"><span>214 / 100</span><span style="color:var(--yellow);">+100 XP</span></div>
            </div>
          </div>

          <div id="achiev-25k-signs" style="background:rgba(255,122,0,0.06);border:1px solid rgba(255,122,0,0.25);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;filter:drop-shadow(0 0 6px rgba(255,122,0,0.4));">📦</div>
            <div>
              <div style="font-size:12px;font-weight:700;color:#fff;margin-bottom:2px;">25k Signs</div>
              <div style="font-size:10px;color:var(--dim);margin-bottom:6px;">Your IPAs signed 25,000 times</div>
              <div style="height:3px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:100%;background:var(--orange);border-radius:2px;"></div></div>
              <div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:3px;"><span>31.4k / 25k</span><span style="color:var(--orange);">+75 XP</span></div>
            </div>
          </div>

          <div id="achiev-50-dylibs" style="background:rgba(157,92,255,0.06);border:1px solid rgba(157,92,255,0.25);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;filter:drop-shadow(0 0 6px rgba(157,92,255,0.4));">🧬</div>
            <div>
              <div style="font-size:12px;font-weight:700;color:#fff;margin-bottom:2px;">50 Dylibs</div>
              <div style="font-size:10px;color:var(--dim);margin-bottom:6px;">Build and release 50 dylibs</div>
              <div style="height:3px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:100%;background:var(--purple);border-radius:2px;"></div></div>
              <div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:3px;"><span>89 / 50</span><span style="color:var(--purple);">+80 XP</span></div>
            </div>
          </div>

          <!-- Locked encoder achievement -->
          <div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;opacity:0.5;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;filter:grayscale(1);">🔱</div>
            <div>
              <div style="font-size:12px;font-weight:700;color:var(--dim);margin-bottom:2px;">Hall of Fame</div>
              <div style="font-size:10px;color:var(--dim);margin-bottom:6px;">Reach 50k total signs</div>
              <div style="height:3px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:63%;background:var(--dim);border-radius:2px;"></div></div>
              <div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:3px;"><span>31.4k / 50k</span><span>+150 XP</span></div>
            </div>
          </div>

        </div></div>

        <!-- Category: Community -->
        <div style="padding:6px 18px 6px;border-top:1px solid var(--border2);"><div style="font-size:11px;color:var(--cyan);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:12px;margin-top:12px;"><i class="fas fa-users"></i> Community Achievements</div>
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:18px;">

          <div id="achiev-100-vouches" style="background:rgba(0,232,122,0.06);border:1px solid rgba(0,232,122,0.25);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;filter:drop-shadow(0 0 6px rgba(0,232,122,0.4));">⭐</div>
            <div>
              <div style="font-size:12px;font-weight:700;color:#fff;margin-bottom:2px;">100 Vouches</div>
              <div style="font-size:10px;color:var(--dim);margin-bottom:6px;">Receive 100 community vouches</div>
              <div style="height:3px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:47%;background:var(--green);border-radius:2px;"></div></div>
              <div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:3px;"><span>47 / 100</span><span style="color:var(--green);">+60 XP — In Progress</span></div>
            </div>
          </div>

          <div id="achiev-top-encoder" style="background:rgba(255,208,0,0.06);border:1px solid rgba(255,208,0,0.25);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;filter:drop-shadow(0 0 6px rgba(255,208,0,0.4));">🥇</div>
            <div>
              <div style="font-size:12px;font-weight:700;color:#fff;margin-bottom:2px;">Top Encoder 2025</div>
              <div style="font-size:10px;color:var(--dim);margin-bottom:6px;">#1 encoder by annual signs</div>
              <div style="height:3px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:100%;background:var(--yellow);border-radius:2px;"></div></div>
              <div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:3px;"><span>Earned 2025</span><span style="color:var(--yellow);">+120 XP</span></div>
            </div>
          </div>

          <div id="achiev-5k-posts" style="background:rgba(0,212,255,0.06);border:1px solid rgba(0,212,255,0.2);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;filter:drop-shadow(0 0 6px rgba(0,212,255,0.4));">💬</div>
            <div>
              <div style="font-size:12px;font-weight:700;color:#fff;margin-bottom:2px;">5k Posts</div>
              <div style="font-size:10px;color:var(--dim);margin-bottom:6px;">Post 5,000 times in the forum</div>
              <div style="height:3px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:100%;background:var(--cyan);border-radius:2px;"></div></div>
              <div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:3px;"><span>6,119 / 5k</span><span style="color:var(--cyan);">+50 XP</span></div>
            </div>
          </div>

          <!-- Locked -->
          <div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;opacity:0.5;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;filter:grayscale(1);">👑</div>
            <div>
              <div style="font-size:12px;font-weight:700;color:var(--dim);margin-bottom:2px;">Community Pillar</div>
              <div style="font-size:10px;color:var(--dim);margin-bottom:6px;">Receive 500 reputation</div>
              <div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:18px;"><span><i class="fas fa-lock" style="margin-right:4px;"></i>Locked</span><span>+100 XP</span></div>
            </div>
          </div>

        </div></div>

        <!-- Category: Technical -->
        <div style="padding:6px 18px 18px;border-top:1px solid var(--border2);"><div style="font-size:11px;color:var(--purple);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:12px;margin-top:12px;"><i class="fas fa-microchip"></i> Technical Achievements</div>
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;">

          <div id="achiev-hook-master" style="background:rgba(157,92,255,0.06);border:1px solid rgba(157,92,255,0.25);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;filter:drop-shadow(0 0 6px rgba(157,92,255,0.4));">🔮</div>
            <div>
              <div style="font-size:12px;font-weight:700;color:#fff;margin-bottom:2px;">Hook Master</div>
              <div style="font-size:10px;color:var(--dim);margin-bottom:6px;">Write 10,000 successful hooks</div>
              <div style="height:3px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:100%;background:var(--purple);border-radius:2px;"></div></div>
              <div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:3px;"><span>412k hooks</span><span style="color:var(--purple);">+90 XP</span></div>
            </div>
          </div>

          <div id="achiev-ios17" style="background:rgba(0,212,255,0.06);border:1px solid rgba(0,212,255,0.2);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;filter:drop-shadow(0 0 6px rgba(0,212,255,0.4));">🍎</div>
            <div>
              <div style="font-size:12px;font-weight:700;color:#fff;margin-bottom:2px;">iOS 17 Pioneer</div>
              <div style="font-size:10px;color:var(--dim);margin-bottom:6px;">First build live on iOS 17.0 day one</div>
              <div style="height:3px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:100%;background:var(--cyan);border-radius:2px;"></div></div>
              <div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:3px;"><span>Earned Sept 2023</span><span style="color:var(--cyan);">+70 XP</span></div>
            </div>
          </div>

          <div id="achiev-arm64" style="background:rgba(0,232,122,0.06);border:1px solid rgba(0,232,122,0.2);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;filter:drop-shadow(0 0 6px rgba(0,232,122,0.4));">⚡</div>
            <div>
              <div style="font-size:12px;font-weight:700;color:#fff;margin-bottom:2px;">ARM64 Expert</div>
              <div style="font-size:10px;color:var(--dim);margin-bottom:6px;">Build 20 arm64e-compatible dylibs</div>
              <div style="height:3px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:100%;background:var(--green);border-radius:2px;"></div></div>
              <div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:3px;"><span>34 / 20</span><span style="color:var(--green);">+65 XP</span></div>
            </div>
          </div>

          <div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;opacity:0.5;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;filter:grayscale(1);">🛸</div>
            <div>
              <div style="font-size:12px;font-weight:700;color:var(--dim);margin-bottom:2px;">iOS 18 Breaker</div>
              <div style="font-size:10px;color:var(--dim);margin-bottom:6px;">First working build on iOS 18.0</div>
              <div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:18px;"><span><i class="fas fa-lock" style="margin-right:4px;"></i>Locked</span><span>+100 XP</span></div>
            </div>
          </div>

        </div></div>
      </div>

    </div><!-- /right col -->
  </div><!-- /grid -->

</div><!-- /page -->


</div>
</div>
<div id="v-dylib1" class="forum-view">
<div class="wrap">
  <div class="breadcrumb">
    <a href="#" onclick="showView('v-category')">MSIGN.PARTY</a>
    <i class="fas fa-chevron-right"></i>
    <a href="#" onclick="showView('v-threads')">Tweaks &amp; Dylibs</a>
    <i class="fas fa-chevron-right"></i>
    <span style="color:var(--purple);">RecallUnlock.dylib v2.1</span>
  </div>
  <div class="dylib-hero" style="border-color:rgba(160,102,255,0.3);border-left-color:var(--purple);">
    <div class="dylib-hero-bg"></div>
    <div class="dylib-hero-content">
      <div class="dylib-hero-left">
        <div class="dylib-hero-icon" style="background:rgba(160,102,255,0.08);border-color:var(--purple)33;color:var(--purple);">
          <i class="fas fa-unlock-alt" style="font-size:26px;"></i>
        </div>
        <div style="min-width:0;">
          <div class="dylib-hero-name">RecallUnlock.dylib v2.1</div>
          <div class="dylib-hero-ver">by <span style="color:var(--cyan);">ZEFv</span></div>
          <div class="dylib-hero-tags"><span class="dylib-tag purple"><i class="fas fa-code"></i> Hook-based</span>
<span class="dylib-tag green"><i class="fas fa-check"></i> Stable</span>
<span class="dylib-tag cyan"><i class="fab fa-apple"></i> iOS 14&ndash;17.4</span></div>
        </div>
      </div>
      <div class="dylib-hero-right">
        <div class="dylib-hero-stat"><span style="color:var(--purple);">3,241</span><small>Injects</small></div>
        <div class="dylib-hero-stat"><span style="color:var(--green);">98.7%</span><small>Success</small></div>
        <div class="dylib-hero-stat"><span style="color:var(--purple);">+841</span><small>Rep</small></div>
        <button class="dylib-dl-btn" style="background:var(--purple);border-color:var(--purple);" onclick="showPage('pg-sign')"><i class="fas fa-syringe"></i> Inject &amp; Sign</button>
      </div>
    </div>
  </div>
  <div class="dylib-tabbar" id="d1-tabbar"><button class="dylib-tab active" onclick="switchDylibTab('d1','overview',this)"><i class="fas fa-file-alt"></i> Overview</button>
<button class="dylib-tab" onclick="switchDylibTab('d1','hooks',this)"><i class="fas fa-crosshairs"></i> Hook Map</button>
<button class="dylib-tab" onclick="switchDylibTab('d1','code',this)"><i class="fas fa-terminal"></i> Code</button>
<button class="dylib-tab" onclick="switchDylibTab('d1','compat',this)"><i class="fab fa-apple"></i> Compat</button>
<button class="dylib-tab" onclick="switchDylibTab('d1','stats',this)"><i class="fas fa-chart-bar"></i> Stats</button>
<button class="dylib-tab" onclick="switchDylibTab('d1','replies',this)"><i class="fas fa-comments"></i> Replies <span class="dylib-tab-count">22</span></button></div>
  <div id="d1-content" class="dylib-page-content"></div>
</div>
</div>
<div id="v-dylib2" class="forum-view">
<div class="wrap">
  <div class="breadcrumb">
    <a href="#" onclick="showView('v-category')">MSIGN.PARTY</a>
    <i class="fas fa-chevron-right"></i>
    <a href="#" onclick="showView('v-threads')">Tweaks &amp; Dylibs</a>
    <i class="fas fa-chevron-right"></i>
    <span style="color:var(--orange);">NoSub.dylib v1.3</span>
  </div>
  <div class="dylib-hero" style="border-color:rgba(160,102,255,0.3);border-left-color:var(--orange);">
    <div class="dylib-hero-bg"></div>
    <div class="dylib-hero-content">
      <div class="dylib-hero-left">
        <div class="dylib-hero-icon" style="background:rgba(160,102,255,0.08);border-color:var(--orange)33;color:var(--orange);">
          <i class="fas fa-ban" style="font-size:26px;"></i>
        </div>
        <div style="min-width:0;">
          <div class="dylib-hero-name">NoSub.dylib v1.3</div>
          <div class="dylib-hero-ver">by <span style="color:var(--yellow);">iOS_Dev</span></div>
          <div class="dylib-hero-tags"><span class="dylib-tag orange"><i class="fas fa-ban"></i> Sub Bypass</span>
<span class="dylib-tag green"><i class="fas fa-check"></i> Stable</span>
<span class="dylib-tag cyan"><i class="fab fa-apple"></i> iOS 14&ndash;17.4</span></div>
        </div>
      </div>
      <div class="dylib-hero-right">
        <div class="dylib-hero-stat"><span style="color:var(--orange);">8,712</span><small>Injects</small></div>
        <div class="dylib-hero-stat"><span style="color:var(--green);">99.2%</span><small>Success</small></div>
        <div class="dylib-hero-stat"><span style="color:var(--purple);">+1.1k</span><small>Rep</small></div>
        <button class="dylib-dl-btn" style="background:var(--orange);border-color:var(--orange);" onclick="showPage('pg-sign')"><i class="fas fa-syringe"></i> Inject &amp; Sign</button>
      </div>
    </div>
  </div>
  <div class="dylib-tabbar" id="d2-tabbar"><button class="dylib-tab active" onclick="switchDylibTab('d2','overview',this)"><i class="fas fa-file-alt"></i> Overview</button>
<button class="dylib-tab" onclick="switchDylibTab('d2','apps',this)"><i class="fas fa-th"></i> Supported Apps</button>
<button class="dylib-tab" onclick="switchDylibTab('d2','hooks',this)"><i class="fas fa-crosshairs"></i> Hook Map</button>
<button class="dylib-tab" onclick="switchDylibTab('d2','code',this)"><i class="fas fa-terminal"></i> Code</button>
<button class="dylib-tab" onclick="switchDylibTab('d2','stats',this)"><i class="fas fa-chart-bar"></i> Stats</button>
<button class="dylib-tab" onclick="switchDylibTab('d2','replies',this)"><i class="fas fa-comments"></i> Replies <span class="dylib-tab-count">38</span></button></div>
  <div id="d2-content" class="dylib-page-content"></div>
</div>
</div>
<div class="zs-footer" style="max-width:1100px;margin:0 auto;">
  <div style="display:flex;gap:20px;"><a href="#">Lite Mode</a><a href="#">Contact Us</a><a href="#">Forum Team</a></div>
  <div>Powered by MyBB © 2002–2026 · MSIGN.PARTY</div>
</div>
</div>
</div><!-- /pg-forum-shell -->
<!-- ══════════════════════════════════════════════
     CREDITS PAGE
══════════════════════════════════════════════ -->
<div id="pg-credits" class="page-wrap" style="display:none;">

    <div class="page-banner orange">
        <div class="page-banner-icon"><i class="fas fa-coins"></i></div>
        <div class="page-banner-text">
            <h2>Credits & Team</h2>
            <p>The people who build, maintain, and keep MSIGN.PARTY running. Show your support by donating.</p>
        </div>
    </div>

    <div class="sec-card">
        <div class="sec-head orange"><div class="sec-head-title"><i class="fas fa-crown"></i> Staff Team</div></div>
        <div class="credit-row">
            <div class="cr-av orange">MA</div>
            <div class="cr-info"><div class="cr-name" style="color:var(--orange);">Marshall</div><div class="cr-role">Founder · Lead Developer · Backend Infrastructure</div></div>
            <div class="cr-badge owner">Owner</div>
        </div>
        <div class="credit-row">
            <div class="cr-av red">AD</div>
            <div class="cr-info"><div class="cr-name" style="color:#ff4444;">admin</div><div class="cr-role">Co-Admin · Forum Management · Support</div></div>
            <div class="cr-badge admin">Admin</div>
        </div>
        <div class="credit-row">
            <div class="cr-av cyan">ZE</div>
            <div class="cr-info"><div class="cr-name" style="color:var(--cyan);">ZEFv</div><div class="cr-role">iOS Developer · TrustCore Integration · IPA Testing</div></div>
            <div class="cr-badge dev">Developer</div>
        </div>
        <div class="credit-row">
            <div class="cr-av" style="border-color:var(--pink);color:var(--pink);">CO</div>
            <div class="cr-info"><div class="cr-name" style="color:var(--pink);">colloum</div><div class="cr-role">UI/UX Designer · Theme Development</div></div>
            <div class="cr-badge designer">Designer</div>
        </div>
        <div class="credit-row">
            <div class="cr-av green">SI</div>
            <div class="cr-info"><div class="cr-name" style="color:var(--green);">sipx</div><div class="cr-role">Moderator · IPA Verification · Community</div></div>
            <div class="cr-badge mod">Moderator</div>
        </div>
        <div class="credit-row">
            <div class="cr-av" style="border-color:var(--yellow);color:var(--yellow);">iD</div>
            <div class="cr-info"><div class="cr-name" style="color:var(--yellow);">iOS_Dev</div><div class="cr-role">Encoder · Dylib Injection · Tweak Packaging</div></div>
            <div class="cr-badge encoder">Encoder</div>
        </div>
    </div>

    <div class="two-col">
        <div class="sec-card">
            <div class="sec-head"><div class="sec-head-title"><i class="fas fa-heart"></i> Special Thanks</div></div>
            <div class="credit-row"><div class="cr-av">TC</div><div class="cr-info"><div class="cr-name">TrustCore Team</div><div class="cr-role">CoreTrust bypass technology</div></div></div>
            <div class="credit-row"><div class="cr-av">TS</div><div class="cr-info"><div class="cr-name">TrollStore</div><div class="cr-role">Permanent installation method</div></div></div>
            <div class="credit-row"><div class="cr-av">AL</div><div class="cr-info"><div class="cr-name">AltStore</div><div class="cr-role">OTA installation inspiration</div></div></div>
            <div class="credit-row"><div class="cr-av">MB</div><div class="cr-info"><div class="cr-name">MyBB Team</div><div class="cr-role">Forum software</div></div></div>
        </div>
        <div class="sec-card">
            <div class="sec-head orange"><div class="sec-head-title"><i class="fas fa-gem"></i> Top Donors</div></div>
            <div style="padding:20px;text-align:center;color:var(--dim);font-size:12px;">
                <i class="fas fa-gem" style="font-size:22px;margin-bottom:8px;display:block;opacity:0.25;"></i>
                No donors yet. Be the first to support!
            </div>
        </div>
    </div>

    <div class="sec-card">
        <div class="sec-head orange"><div class="sec-head-title"><i class="fas fa-donate"></i> Support the Project</div></div>
        <div style="padding:20px 24px; display:flex; gap:24px; align-items:center;">
            <div style="flex:1;">
                <div style="font-family:'Oswald',sans-serif;font-size:16px;color:#fff;margin-bottom:6px;">Keep MSIGN.PARTY running</div>
                <div style="font-size:13px;color:var(--grey);line-height:1.7;">Server costs, development time, and signing infrastructure aren't free. Any contribution goes directly to keeping the service alive and improving it. Donors receive a special badge and early access to new features.</div>
            </div>
            <div style="display:flex;flex-direction:column;gap:10px;flex-shrink:0;">
                <a href="#" style="display:flex;align-items:center;gap:8px;padding:10px 24px;background:var(--orange);color:#000;font-family:'Oswald',sans-serif;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;">
                    <i class="fab fa-paypal"></i> Donate via PayPal
                </a>
                <a href="#" style="display:flex;align-items:center;gap:8px;padding:10px 24px;background:transparent;color:var(--orange);border:1px solid var(--orange);font-family:'Oswald',sans-serif;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;">
                    <i class="fab fa-bitcoin"></i> Donate Crypto
                </a>
            </div>
        </div>
    </div>
</div>

<!-- ══════════════════════════════════════════════
     UPGRADE PAGE
══════════════════════════════════════════════ -->
<div id="pg-upgrade" class="page-wrap" style="display:none;">

    <div class="page-banner" style="border-left-color:var(--green);background:linear-gradient(90deg,rgba(0,204,85,0.06) 0%,transparent 60%);">
        <div class="page-banner-icon" style="color:var(--green);"><i class="fas fa-bolt"></i></div>
        <div class="page-banner-text">
            <h2>Upgrade Your Account</h2>
            <p>Unlock higher signing limits, faster servers, priority support, and exclusive app access.</p>
        </div>
    </div>

    <div class="sec-card">
        <div class="sec-head green"><div class="sec-head-title"><i class="fas fa-layer-group"></i> Choose a Plan</div></div>
        <div class="plans-row">
            <div class="plan-card">
                <div class="plan-name">Free</div>
                <div class="plan-price">$0<span>/mo</span></div>
                <div class="plan-desc">Basic access to start signing</div>
                <div class="plan-features">
                    <div class="pf"><i class="fas fa-check yes"></i> 3 signs per day</div>
                    <div class="pf"><i class="fas fa-check yes"></i> Standard signing server</div>
                    <div class="pf"><i class="fas fa-check yes"></i> Public IPA library</div>
                    <div class="pf muted"><i class="fas fa-times no"></i> Priority queue</div>
                    <div class="pf muted"><i class="fas fa-times no"></i> Private IPAs</div>
                    <div class="pf muted"><i class="fas fa-times no"></i> Bulk signing</div>
                    <div class="pf muted"><i class="fas fa-times no"></i> API access</div>
                </div>
                <button class="plan-btn free">Current Plan</button>
            </div>
            <div class="plan-card featured">
                <div class="plan-featured-badge">Most Popular</div>
                <div class="plan-name" style="color:var(--cyan);">Premium</div>
                <div class="plan-price" style="color:var(--cyan);">$4.99<span>/mo</span></div>
                <div class="plan-desc">For regular users who need more</div>
                <div class="plan-features">
                    <div class="pf"><i class="fas fa-check yes"></i> 25 signs per day</div>
                    <div class="pf"><i class="fas fa-check yes"></i> Priority signing server</div>
                    <div class="pf"><i class="fas fa-check yes"></i> Full IPA library</div>
                    <div class="pf"><i class="fas fa-check yes"></i> Priority queue</div>
                    <div class="pf"><i class="fas fa-check yes"></i> Private IPA uploads</div>
                    <div class="pf muted"><i class="fas fa-times no"></i> Bulk signing</div>
                    <div class="pf muted"><i class="fas fa-times no"></i> API access</div>
                </div>
                <button class="plan-btn premium"><i class="fas fa-bolt"></i> Upgrade Now</button>
            </div>
            <div class="plan-card">
                <div class="plan-name" style="color:var(--orange);">VIP</div>
                <div class="plan-price">$12.99<span>/mo</span></div>
                <div class="plan-desc">Power users & developers</div>
                <div class="plan-features">
                    <div class="pf"><i class="fas fa-check yes"></i> Unlimited signs</div>
                    <div class="pf"><i class="fas fa-check yes"></i> Dedicated server</div>
                    <div class="pf"><i class="fas fa-check yes"></i> Full IPA library</div>
                    <div class="pf"><i class="fas fa-check yes"></i> Priority queue</div>
                    <div class="pf"><i class="fas fa-check yes"></i> Private IPA uploads</div>
                    <div class="pf"><i class="fas fa-check yes"></i> Bulk signing (50/batch)</div>
                    <div class="pf"><i class="fas fa-check yes"></i> API access</div>
                </div>
                <button class="plan-btn vip"><i class="fas fa-crown"></i> Go VIP</button>
            </div>
        </div>
    </div>

    <div class="sec-card">
        <div class="sec-head green"><div class="sec-head-title"><i class="fas fa-table"></i> Full Comparison</div></div>
        <div class="perks-table">
            <div class="perks-row head">
                <div class="perks-cell">Feature</div>
                <div class="perks-cell">Free</div>
                <div class="perks-cell" style="color:var(--cyan);">Premium</div>
                <div class="perks-cell" style="color:var(--orange);">VIP</div>
            </div>
            <div class="perks-row"><div class="perks-cell">Daily Sign Limit</div><div class="perks-cell">3</div><div class="perks-cell" style="color:var(--cyan);">25</div><div class="perks-cell" style="color:var(--orange);">∞ Unlimited</div></div>
            <div class="perks-row"><div class="perks-cell">Server Speed</div><div class="perks-cell">Standard</div><div class="perks-cell" style="color:var(--cyan);">Priority</div><div class="perks-cell" style="color:var(--orange);">Dedicated</div></div>
            <div class="perks-row"><div class="perks-cell">IPA Library Access</div><div class="perks-cell">Public only</div><div class="perks-cell"><i class="fas fa-check yes"></i></div><div class="perks-cell"><i class="fas fa-check yes"></i></div></div>
            <div class="perks-row"><div class="perks-cell">Private IPA Upload</div><div class="perks-cell"><i class="fas fa-times no"></i></div><div class="perks-cell"><i class="fas fa-check yes"></i></div><div class="perks-cell"><i class="fas fa-check yes"></i></div></div>
            <div class="perks-row"><div class="perks-cell">Bulk Signing</div><div class="perks-cell"><i class="fas fa-times no"></i></div><div class="perks-cell"><i class="fas fa-times no"></i></div><div class="perks-cell"><i class="fas fa-check yes"></i></div></div>
            <div class="perks-row"><div class="perks-cell">API Access</div><div class="perks-cell"><i class="fas fa-times no"></i></div><div class="perks-cell"><i class="fas fa-times no"></i></div><div class="perks-cell"><i class="fas fa-check yes"></i></div></div>
            <div class="perks-row"><div class="perks-cell">Support Priority</div><div class="perks-cell">Community</div><div class="perks-cell" style="color:var(--cyan);">Fast</div><div class="perks-cell" style="color:var(--orange);">24hr Direct</div></div>
            <div class="perks-row"><div class="perks-cell">Forum Badge</div><div class="perks-cell"><i class="fas fa-times no"></i></div><div class="perks-cell"><i class="fas fa-check yes"></i></div><div class="perks-cell"><i class="fas fa-check yes"></i></div></div>
        </div>
    </div>
</div>

<!-- ══════════════════════════════════════════════
     REGULATIONS PAGE
══════════════════════════════════════════════ -->
<div id="pg-regs" class="page-wrap" style="display:none;">

    <div class="page-banner orange">
        <div class="page-banner-icon"><i class="fas fa-gavel"></i></div>
        <div class="page-banner-text">
            <h2>Rules & Regulations</h2>
            <p>By using MSIGN.PARTY you agree to all rules listed below. Violations result in warnings, restrictions, or permanent bans.</p>
        </div>
    </div>

    <div class="sec-card">
        <div class="sec-head orange"><div class="sec-head-title"><i class="fas fa-book"></i> Community Rules</div></div>
        <div class="reg-section">
            <div class="reg-num">01</div>
            <div class="reg-title">Respect & Conduct</div>
            <div class="reg-body">Treat all members with respect. <strong>Harassment, threats, and personal attacks</strong> will result in an immediate ban. Constructive criticism is welcome — abuse is not. This includes PMs.<div class="reg-rule"><i class="fas fa-ban"></i> Zero tolerance for targeted harassment, doxxing, or hate speech.</div></div>
        </div>
        <div class="reg-section">
            <div class="reg-num">02</div>
            <div class="reg-title">No Malware or Harmful IPAs</div>
            <div class="reg-body">Do <span class="warn">NOT</span> upload, share, or request IPAs that contain malware, spyware, credential stealers, or any harmful code. All uploads are scanned. <strong>Users distributing malicious files will be permanently banned and reported.</strong><div class="reg-rule"><i class="fas fa-ban"></i> Immediate permanent ban + IP block for malware distribution.</div></div>
        </div>
        <div class="reg-section">
            <div class="reg-num">03</div>
            <div class="reg-title">No Selling or Trading Accounts</div>
            <div class="reg-body">Selling, buying, or trading MSIGN.PARTY accounts is strictly prohibited. <strong>Account sharing</strong> is also not allowed. Each account must correspond to one individual user.<div class="reg-rule"><i class="fas fa-ban"></i> Both accounts involved in a sale/trade will be banned.</div></div>
        </div>
        <div class="reg-section">
            <div class="reg-num">04</div>
            <div class="reg-title">No Spam or Flooding</div>
            <div class="reg-body">Do not post <strong>low-quality, repetitive, or off-topic</strong> content to inflate your post count. Advertising external services without permission is considered spam.<div class="reg-rule"><i class="fas fa-exclamation-triangle"></i> First offence: warning. Repeat: temporary ban.</div></div>
        </div>
        <div class="reg-section">
            <div class="reg-num">05</div>
            <div class="reg-title">IPA Upload Guidelines</div>
            <div class="reg-body">Only upload IPAs you have <strong>the right to distribute</strong>. Paid apps ripped directly from the App Store without modification are not permitted. Modified/tweaked apps must clearly state all injected dylibs in the description.<div class="reg-rule"><i class="fas fa-info-circle"></i> Include: app name, version, bundle ID, tweak list, and tested iOS version.</div></div>
        </div>
        <div class="reg-section">
            <div class="reg-num">06</div>
            <div class="reg-title">No Chargebacks or Payment Fraud</div>
            <div class="reg-body">Initiating a chargeback on a subscription or donation payment is considered fraud. <span class="warn">Your account will be permanently banned</span> and the debt will be escalated.</div>
        </div>
    </div>

    <div class="sec-card">
        <div class="sec-head orange"><div class="sec-head-title"><i class="fas fa-shield-alt"></i> Punishment Scale</div></div>
        <div class="perks-table">
            <div class="perks-row head" style="background:var(--card2);">
                <div class="punish-cell offense" style="color:var(--dim);font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;">Offence</div>
                <div class="punish-cell warn2" style="color:var(--dim);font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;">1st Offence</div>
                <div class="punish-cell warn2" style="color:var(--dim);font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;">2nd Offence</div>
                <div class="punish-cell ban" style="color:var(--dim);font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;">3rd+</div>
            </div>
            <div class="perks-row"><div class="punish-cell offense">Disrespect / Harassment</div><div class="punish-cell warn2">Warning</div><div class="punish-cell warn2">3-day ban</div><div class="punish-cell ban">Permanent ban</div></div>
            <div class="perks-row"><div class="punish-cell offense">Spam / Flooding</div><div class="punish-cell warn2">Warning</div><div class="punish-cell warn2">1-day ban</div><div class="punish-cell ban">7-day ban</div></div>
            <div class="perks-row"><div class="punish-cell offense">Malware Distribution</div><div class="punish-cell ban" colspan="3">Immediate permanent ban + IP block</div></div>
            <div class="perks-row"><div class="punish-cell offense">Account Selling/Trading</div><div class="punish-cell ban" colspan="3">Both accounts permanently banned</div></div>
            <div class="perks-row"><div class="punish-cell offense">Chargeback Fraud</div><div class="punish-cell ban" colspan="3">Permanent ban + escalation</div></div>
        </div>
    </div>
</div>

<!-- ══════════════════════════════════════════════
     FAQ PAGE
══════════════════════════════════════════════ -->
<div id="pg-faq" class="page-wrap" style="display:none;">

    <div class="page-banner pink">
        <div class="page-banner-icon"><i class="fas fa-question-circle"></i></div>
        <div class="page-banner-text">
            <h2>Frequently Asked Questions</h2>
            <p>Can't find an answer? Post in the <a href="#" onclick="show('forum',document.querySelector('.forum'))" style="color:var(--pink);">Support forum</a> and our team will help.</p>
        </div>
    </div>

    <div class="sec-card">
        <div class="sec-head pink"><div class="sec-head-title"><i class="fas fa-pen-nib"></i> Signing & Installation</div></div>
        <div class="faq-item open">
            <div class="faq-q" onclick="toggleFaq(this)"><i class="fas fa-chevron-right faq-q-icon"></i><div class="faq-q-text">How does MSIGN sign apps without a certificate?</div><i class="fas fa-chevron-down faq-q-arrow"></i></div>
            <div class="faq-a">MSIGN uses <strong>TrustCore v4</strong>, which exploits Apple's CoreTrust validation to install apps as if they were signed by a trusted enterprise. No personal Apple ID or developer certificate is required. The signed IPA is installed via OTA or TrollStore depending on your iOS version.</div>
        </div>
        <div class="faq-item">
            <div class="faq-q" onclick="toggleFaq(this)"><i class="fas fa-chevron-right faq-q-icon"></i><div class="faq-q-text">Which iOS versions are supported?</div><i class="fas fa-chevron-down faq-q-arrow"></i></div>
            <div class="faq-a">TrustCore v4 currently supports <strong>iOS 14.0 through iOS 17.4</strong>. iOS 17.5+ support is in testing. OTA installation works on all versions; TrollStore installation requires iOS 14–16.7.x or 17.0.</div>
        </div>
        <div class="faq-item">
            <div class="faq-q" onclick="toggleFaq(this)"><i class="fas fa-chevron-right faq-q-icon"></i><div class="faq-q-text">How do I install a signed IPA without a computer?</div><i class="fas fa-chevron-down faq-q-arrow"></i></div>
            <div class="faq-a">After signing, tap the <strong>Install</strong> button on the app page. Your device will prompt you to trust the profile. If OTA fails, try the TrollStore method: download the <code>.ipa</code> file and open it with TrollStore from your Files app.</div>
        </div>
        <div class="faq-item">
            <div class="faq-q" onclick="toggleFaq(this)"><i class="fas fa-chevron-right faq-q-icon"></i><div class="faq-q-text">Will signed apps expire or get revoked?</div><i class="fas fa-chevron-down faq-q-arrow"></i></div>
            <div class="faq-a">TrustCore-signed apps installed via TrollStore are <strong>permanent</strong> — they never expire. OTA-installed apps may show a revocation message if Apple patches the signing method. When that happens, simply re-sign and reinstall — your data is preserved.</div>
        </div>
        <div class="faq-item">
            <div class="faq-q" onclick="toggleFaq(this)"><i class="fas fa-chevron-right faq-q-icon"></i><div class="faq-q-text">Can I sign my own IPA?</div><i class="fas fa-chevron-down faq-q-arrow"></i></div>
            <div class="faq-a">Yes! <strong>Premium and VIP</strong> members can upload custom IPAs for signing. Go to <code>My Library → Upload IPA</code>, select your file, and hit Sign. Max file size is 500MB for Premium, unlimited for VIP.</div>
        </div>
    </div>

    <div class="sec-card">
        <div class="sec-head pink"><div class="sec-head-title"><i class="fas fa-user-circle"></i> Account & Billing</div></div>
        <div class="faq-item">
            <div class="faq-q" onclick="toggleFaq(this)"><i class="fas fa-chevron-right faq-q-icon"></i><div class="faq-q-text">How do I upgrade to Premium or VIP?</div><i class="fas fa-chevron-down faq-q-arrow"></i></div>
            <div class="faq-a">Visit the <a href="#" onclick="show('upgrade',document.querySelector('.upgrade'))">Upgrade page</a> and choose your plan. We accept PayPal, credit cards, and crypto. Your account is upgraded instantly after payment confirmation.</div>
        </div>
        <div class="faq-item">
            <div class="faq-q" onclick="toggleFaq(this)"><i class="fas fa-chevron-right faq-q-icon"></i><div class="faq-q-text">Can I get a refund?</div><i class="fas fa-chevron-down faq-q-arrow"></i></div>
            <div class="faq-a">Refunds are available within <strong>48 hours</strong> of purchase if you haven't used any premium features. Contact support via PM. After 48 hours or after using premium features, refunds are not available. Chargebacks will result in a permanent ban.</div>
        </div>
        <div class="faq-item">
            <div class="faq-q" onclick="toggleFaq(this)"><i class="fas fa-chevron-right faq-q-icon"></i><div class="faq-q-text">I forgot my password. How do I reset it?</div><i class="fas fa-chevron-down faq-q-arrow"></i></div>
            <div class="faq-a">Go to the login page and click <strong>Forgot Password</strong>. Enter your registered email and you'll receive a reset link. If you no longer have access to that email, contact a staff member in the <code>#support</code> Discord channel with proof of account ownership.</div>
        </div>
    </div>

    <div class="sec-card">
        <div class="sec-head pink"><div class="sec-head-title"><i class="fas fa-cog"></i> Technical</div></div>
        <div class="faq-item">
            <div class="faq-q" onclick="toggleFaq(this)"><i class="fas fa-chevron-right faq-q-icon"></i><div class="faq-q-text">The app crashes immediately after install. What do I do?</div><i class="fas fa-chevron-down faq-q-arrow"></i></div>
            <div class="faq-a">First, check that your iOS version is supported. Then try: <strong>1)</strong> Delete and reinstall. <strong>2)</strong> Restart your device. <strong>3)</strong> Check if a newer version of the IPA is available. If it still crashes, post in the app's thread with your device model and iOS version.</div>
        </div>
        <div class="faq-item">
            <div class="faq-q" onclick="toggleFaq(this)"><i class="fas fa-chevron-right faq-q-icon"></i><div class="faq-q-text">Is MSIGN safe? Will Apple ban my Apple ID?</div><i class="fas fa-chevron-down faq-q-arrow"></i></div>
            <div class="faq-a">TrustCore does not use your Apple ID for signing — <strong>your account is never at risk</strong>. Apps are signed with our certificates, not yours. Apple cannot ban your personal Apple ID for installing apps this way. The risk is limited to the signed app being revoked by Apple, not your account.</div>
        </div>
    </div>
</div>


<!-- ══════════════════════════════════════════════
     BROWSE ALL APPS PAGE
══════════════════════════════════════════════ -->
<div id="pg-apps" class="page-wrap" style="display:none;">

    <div class="page-banner" style="border-left-color:var(--cyan);background:linear-gradient(90deg,rgba(0,204,255,0.06),transparent 60%);">
        <div class="page-banner-icon" style="color:var(--cyan);"><i class="fas fa-th-large"></i></div>
        <div class="page-banner-text">
            <h2>App Library</h2>
            <p id="al-banner-text">Loading apps from repo...</p>
        </div>
    </div>

    <!-- Search + filter bar -->
    <div class="sec-card">
        <!-- Search row -->
        <div class="lib-search-wrap">
            <div class="lib-search-inner">
                <i class="fas fa-search"></i>
                <input type="text" placeholder="Search apps, bundle IDs, tweaks..." id="lib-search-input" oninput="filterLibrary(this.value)">
            </div>
            <button class="lib-filter-btn" onclick="toggleLibFilters()">
                <i class="fas fa-sliders-h"></i> Filters
                <i class="fas fa-chevron-down" id="filter-chevron" style="font-size:10px;transition:transform 0.2s;"></i>
            </button>
        </div>

        <!-- Expanded filters (hidden by default) -->
        <div id="lib-filter-panel" style="display:none;padding:10px 20px 14px;background:rgba(255,136,0,0.02);border-bottom:1px solid var(--border2);display:none;">
            <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
                <select style="background:var(--card2);border:1px solid var(--border);color:var(--grey);padding:6px 10px;font-size:12px;font-family:'Rajdhani',sans-serif;outline:none;cursor:pointer;border-radius:4px;">
                    <option>Sort: Popular</option>
                    <option>Sort: Newest</option>
                    <option>Sort: A–Z</option>
                    <option>Sort: Downloads</option>
                </select>
                <select style="background:var(--card2);border:1px solid var(--border);color:var(--grey);padding:6px 10px;font-size:12px;font-family:'Rajdhani',sans-serif;outline:none;cursor:pointer;border-radius:4px;">
                    <option>iOS: All</option>
                    <option>iOS 17.x</option>
                    <option>iOS 16.x</option>
                    <option>iOS 15.x</option>
                    <option>iOS 14.x</option>
                </select>
                <select style="background:var(--card2);border:1px solid var(--border);color:var(--grey);padding:6px 10px;font-size:12px;font-family:'Rajdhani',sans-serif;outline:none;cursor:pointer;border-radius:4px;">
                    <option>Size: Any</option>
                    <option>Under 100 MB</option>
                    <option>100–500 MB</option>
                    <option>Over 500 MB</option>
                </select>
                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:var(--grey);cursor:pointer;font-family:'Rajdhani',sans-serif;">
                    <input type="checkbox" style="accent-color:var(--orange);"> HOT only
                </label>
                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:var(--grey);cursor:pointer;font-family:'Rajdhani',sans-serif;">
                    <input type="checkbox" style="accent-color:var(--orange);"> New this week
                </label>
            </div>
        </div>

        <!-- Category filter tabs — centered pills -->
        <div class="app-filter-tabs">
            <div class="app-tab active" onclick="setTab(this);filterLibraryCat('all')"><i class="fas fa-th-large" style="font-size:11px;"></i> ALL</div>
            <div class="app-tab" onclick="setTab(this);filterLibraryCat('tools')"><i class="fas fa-tools" style="font-size:11px;"></i> TOOLS</div>
            <div class="app-tab" onclick="setTab(this);filterLibraryCat('media')"><i class="fas fa-photo-video" style="font-size:11px;"></i> MEDiA</div>
            <div class="app-tab" onclick="setTab(this);filterLibraryCat('social')"><i class="fas fa-users" style="font-size:11px;"></i> SOCiAL</div>
            <div class="app-tab" onclick="setTab(this);filterLibraryCat('jailbreak')"><i class="fas fa-lock" style="font-size:11px;"></i> JAiLBREAK</div>
            <div class="app-tab" onclick="setTab(this);filterLibraryCat('car')"><i class="fas fa-car" style="font-size:11px;"></i> CAR</div>
            <div class="app-tab" onclick="setTab(this);filterLibraryCat('emu')"><i class="fas fa-gamepad" style="font-size:11px;"></i> EMU</div>
        </div>
    </div>

    <!-- App list — full width table-style -->
    <div class="sec-card">
        <div class="sec-head">
            <div class="sec-head-title"><i class="fas fa-list"></i> All Apps</div>
            <div class="sec-head-meta" id="al-result-count">Loading...</div>
        </div>

        <!-- List header -->
        <div style="display:grid;grid-template-columns:1fr 140px 80px 80px 100px 120px;gap:0;padding:6px 14px;background:var(--card2);border-bottom:1px solid var(--border2);">
            <div style="font-family:'Oswald',sans-serif;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--dim);">App</div>
            <div style="font-family:'Oswald',sans-serif;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--dim);text-align:center;">Version</div>
            <div style="font-family:'Oswald',sans-serif;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--dim);text-align:center;">iOS</div>
            <div style="font-family:'Oswald',sans-serif;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--dim);text-align:center;">Size</div>
            <div style="font-family:'Oswald',sans-serif;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--dim);text-align:center;">Downloads</div>
            <div style="font-family:'Oswald',sans-serif;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--dim);text-align:center;">Action</div>
        </div>

        <!-- Dynamic app rows — populated from repo.json -->
        <div id="al-list-body">
            <div style="padding:32px;text-align:center;color:var(--dim);font-size:12px;">
                <i class="fas fa-spinner fa-spin" style="color:var(--cyan);margin-right:8px;font-size:16px;"></i> Loading apps from repo...
            </div>
        </div>

        <!-- Pagination -->
        <div style="padding:14px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border2);" id="al-pagination">
            <div style="font-size:12px;color:var(--dim);" id="al-page-info"></div>
            <div style="display:flex;gap:4px;" id="al-page-btns"></div>
        </div>
    </div>
</div>

<!-- ══════════════════════════════════════════════
     ALL NEWS PAGE
══════════════════════════════════════════════ -->
<div id="pg-allnews" class="page-wrap" style="display:none;">

    <div class="page-banner" style="border-left-color:var(--cyan);background:linear-gradient(90deg,rgba(0,204,255,0.06),transparent 60%);">
        <div class="page-banner-icon" style="color:var(--cyan);"><i class="fas fa-newspaper"></i></div>
        <div class="page-banner-text">
            <h2>All News & Updates</h2>
            <p>Stay up to date with MSIGN announcements, guides, and IPA drops.</p>
        </div>
    </div>

    <!-- Filter row -->
    <div class="sec-card" style="overflow:visible;">
        <div style="display:flex;gap:0;border-bottom:1px solid var(--border2);background:var(--card2);">
            <div class="app-tab active" onclick="setNewsTab(this)" style="padding:9px 18px;">ALL</div>
            <div class="app-tab" onclick="setNewsTab(this)" style="padding:9px 18px;">UPDATES</div>
            <div class="app-tab" onclick="setNewsTab(this)" style="padding:9px 18px;">GUIDES</div>
            <div class="app-tab" onclick="setNewsTab(this)" style="padding:9px 18px;">RELEASES</div>
            <div class="app-tab" onclick="setNewsTab(this)" style="padding:9px 18px;">ANNOUNCEMENTS</div>
        </div>
    </div>

    <div style="display:grid;grid-template-columns:1fr 280px;gap:16px;">
        <!-- News list -->
        <div style="display:flex;flex-direction:column;gap:0;" class="sec-card">
            <div class="sec-head"><div class="sec-head-title"><i class="fas fa-list"></i> Latest Posts</div><div class="sec-head-meta">0 articles</div></div>

            <!-- Empty state — articles loaded from DB -->
            <div style="padding:32px 20px;text-align:center;color:var(--dim);font-size:13px;">
                <i class="fas fa-newspaper" style="font-size:28px;margin-bottom:10px;display:block;opacity:0.25;"></i>
                No articles yet. Check back soon!
            </div>

            <!-- Pagination -->
            <div style="padding:14px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border2);">
                <div style="font-size:12px;color:var(--dim);">No articles yet</div>
                <div style="display:flex;gap:4px;"></div>
            </div>
        </div>

        <!-- News sidebar -->
        <div style="display:flex;flex-direction:column;gap:16px;">
            <!-- Popular -->
            <div class="sec-card">
                <div class="sec-head"><div class="sec-head-title"><i class="fas fa-fire"></i> Most Read</div></div>
                <div style="padding:10px 14px;display:flex;flex-direction:column;gap:10px;">
                    <div onclick="showPage('pg-article')" style="cursor:pointer;display:flex;gap:10px;align-items:flex-start;">
                        <div style="font-family:'Oswald',sans-serif;font-size:22px;font-weight:700;color:var(--yellow);flex-shrink:0;line-height:1;">1</div>
                        <div><div style="font-size:12px;font-weight:600;color:var(--white);line-height:1.4;">Beginner's Guide: What is TrustCore?</div><div style="font-size:10px;color:var(--dim);margin-top:3px;">9,204 views</div></div>
                    </div>
                    <div onclick="showPage('pg-article')" style="cursor:pointer;display:flex;gap:10px;align-items:flex-start;">
                        <div style="font-family:'Oswald',sans-serif;font-size:22px;font-weight:700;color:var(--grey);flex-shrink:0;line-height:1;">2</div>
                        <div><div style="font-size:12px;font-weight:600;color:var(--white);line-height:1.4;">50 New IPAs Added This Week</div><div style="font-size:10px;color:var(--dim);margin-top:3px;">7,124 views</div></div>
                    </div>
                    <div onclick="showPage('pg-article')" style="cursor:pointer;display:flex;gap:10px;align-items:flex-start;">
                        <div style="font-family:'Oswald',sans-serif;font-size:22px;font-weight:700;color:var(--orange);flex-shrink:0;line-height:1;">3</div>
                        <div><div style="font-size:12px;font-weight:600;color:var(--white);line-height:1.4;">How to Install Without a Computer</div><div style="font-size:10px;color:var(--dim);margin-top:3px;">3,891 views</div></div>
                    </div>
                </div>
            </div>
            <!-- Tags -->
            <div class="sec-card">
                <div class="sec-head"><div class="sec-head-title"><i class="fas fa-tags"></i> Tags</div></div>
                <div style="padding:12px;display:flex;flex-wrap:wrap;gap:6px;">
                    <span class="donor-tag" style="color:var(--orange);border-color:rgba(255,136,0,0.3);">TrustCore</span>
                    <span class="donor-tag">iOS 17</span>
                    <span class="donor-tag">Signing</span>
                    <span class="donor-tag">Guide</span>
                    <span class="donor-tag">Spotify</span>
                    <span class="donor-tag">Update</span>
                    <span class="donor-tag">TrollStore</span>
                    <span class="donor-tag">IPA</span>
                    <span class="donor-tag">Tweak</span>
                    <span class="donor-tag">OTA</span>
                    <span class="donor-tag">Discord</span>
                    <span class="donor-tag">Instagram</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ══════════════════════════════════════════════
     NEWS ARTICLE PAGE
══════════════════════════════════════════════ -->
<div id="pg-article" class="page-wrap" style="display:none;">

    <div style="display:grid;grid-template-columns:1fr 280px;gap:16px;">
        <!-- Main article -->
        <div style="display:flex;flex-direction:column;gap:16px;">

            <!-- Breadcrumb -->
            <div style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);">
                <a href="#" onclick="showPage('pg-portal')" style="color:var(--dim);transition:color 0.15s;" onmouseover="this.style.color='var(--cyan)'" onmouseout="this.style.color='var(--dim)'">Portal</a>
                <i class="fas fa-chevron-right" style="font-size:9px;"></i>
                <a href="#" onclick="showPage('pg-allnews')" style="color:var(--dim);transition:color 0.15s;" onmouseover="this.style.color='var(--cyan)'" onmouseout="this.style.color='var(--dim)'">News</a>
                <i class="fas fa-chevron-right" style="font-size:9px;"></i>
                <span style="color:var(--grey);">TrustCore v4.2 Released</span>
            </div>

            <!-- Article card -->
            <div class="sec-card">
                <!-- Article header -->
                <div style="padding:24px 28px;border-bottom:1px solid var(--border2);">
                    <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;">
                        <span class="nl-tag update">UPDATE</span>
                        <span style="font-size:11px;color:var(--dim);"><i class="fas fa-clock"></i> February 17, 2026 · 2 hours ago</span>
                    </div>
                    <h1 style="font-family:'Oswald',sans-serif;font-size:26px;font-weight:700;color:#fff;letter-spacing:0.5px;line-height:1.3;margin-bottom:14px;">TrustCore v4.2 Released — iOS 17.4 Support Added</h1>
                    <div style="display:flex;align-items:center;gap:16px;padding-top:14px;border-top:1px solid var(--border2);">
                        <div style="display:flex;align-items:center;gap:8px;">
                            <div style="width:32px;height:32px;border-radius:50%;background:var(--card2);border:2px solid var(--orange);display:flex;align-items:center;justify-content:center;font-family:'Oswald',sans-serif;font-size:11px;font-weight:700;color:var(--orange);">AD</div>
                            <div><div style="font-size:13px;font-weight:700;color:var(--orange);">admin</div><div style="font-size:10px;color:var(--dim);">Administrator</div></div>
                        </div>
                        <div style="display:flex;gap:16px;margin-left:auto;font-size:12px;color:var(--dim);">
                            <span><i class="fas fa-eye"></i> 1,204 views</span>
                            <span><i class="fas fa-comment"></i> 22 replies</span>
                            <span><i class="fas fa-share-alt"></i> Share</span>
                        </div>
                    </div>
                </div>

                <!-- Article body -->
                <div style="padding:28px;font-size:14px;color:var(--grey);line-height:1.9;">
                    <p style="color:var(--white);font-size:15px;margin-bottom:20px;">We're excited to announce the release of <strong style="color:var(--orange);">TrustCore v4.2</strong>, bringing full iOS 17.4 compatibility and a range of stability improvements to the signing pipeline.</p>

                    <div style="background:rgba(255,136,0,0.06);border-left:3px solid var(--orange);padding:14px 18px;margin-bottom:24px;font-size:13px;color:var(--white);">
                        <strong style="color:var(--orange);">⚡ TL;DR:</strong> All existing signed apps will continue to work. iOS 17.4 users can now sign and install apps normally. No action required for current users.
                    </div>

                    <h3 style="font-family:'Oswald',sans-serif;color:#fff;font-size:16px;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border2);">What's New in v4.2</h3>
                    <ul style="margin-bottom:24px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px;">
                        <li style="display:flex;gap:10px;align-items:flex-start;"><i class="fas fa-check-circle" style="color:var(--green);margin-top:3px;flex-shrink:0;"></i><span><strong style="color:var(--white);">iOS 17.4 Full Support</strong> — CoreTrust bypass now fully operational on iOS 17.4. Tested on iPhone 15 Pro, 14 Pro, 13, and SE (3rd gen).</span></li>
                        <li style="display:flex;gap:10px;align-items:flex-start;"><i class="fas fa-check-circle" style="color:var(--green);margin-top:3px;flex-shrink:0;"></i><span><strong style="color:var(--white);">iOS 17.5 Beta Partial Support</strong> — Early compatibility in place. Some apps may still fail. See our <a href="#">status thread</a> for known issues.</span></li>
                        <li style="display:flex;gap:10px;align-items:flex-start;"><i class="fas fa-check-circle" style="color:var(--green);margin-top:3px;flex-shrink:0;"></i><span><strong style="color:var(--white);">40% Faster Signing</strong> — Optimized certificate injection pipeline reduces average sign time from 55s to 33s.</span></li>
                        <li style="display:flex;gap:10px;align-items:flex-start;"><i class="fas fa-check-circle" style="color:var(--green);margin-top:3px;flex-shrink:0;"></i><span><strong style="color:var(--white);">Improved OTA Stability</strong> — Fixed intermittent install failures on cellular networks. OTA now retries automatically on timeout.</span></li>
                        <li style="display:flex;gap:10px;align-items:flex-start;"><i class="fas fa-check-circle" style="color:var(--green);margin-top:3px;flex-shrink:0;"></i><span><strong style="color:var(--white);">Entitlement Preservation</strong> — Apps with custom entitlements (push notifications, widgets) now retain them post-signing.</span></li>
                    </ul>

                    <h3 style="font-family:'Oswald',sans-serif;color:#fff;font-size:16px;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border2);">Known Issues</h3>
                    <ul style="margin-bottom:24px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px;">
                        <li style="display:flex;gap:10px;align-items:flex-start;"><i class="fas fa-exclamation-triangle" style="color:var(--yellow);margin-top:3px;flex-shrink:0;"></i><span>Some apps with DRM-linked entitlements may crash on first launch on iOS 17.5 beta. Workaround: re-sign with the "strip entitlements" option enabled.</span></li>
                        <li style="display:flex;gap:10px;align-items:flex-start;"><i class="fas fa-exclamation-triangle" style="color:var(--yellow);margin-top:3px;flex-shrink:0;"></i><span>TrollStore installations on iOS 17.0 may require a manual refresh. Open TrollStore → Refresh App Registrations after install.</span></li>
                    </ul>

                    <div style="background:var(--card2);border:1px solid var(--border);padding:16px 20px;margin-bottom:24px;">
                        <div style="font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--dim);margin-bottom:10px;">Version Info</div>
                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px;">
                            <div><span style="color:var(--dim);">Version:</span> <span style="color:var(--white);">TrustCore v4.2.0</span></div>
                            <div><span style="color:var(--dim);">Released:</span> <span style="color:var(--white);">Feb 17, 2026</span></div>
                            <div><span style="color:var(--dim);">iOS Support:</span> <span style="color:var(--white);">14.0 – 17.4 (17.5 beta)</span></div>
                            <div><span style="color:var(--dim);">Sign Engine:</span> <span style="color:var(--white);">TrustCore v4.2</span></div>
                        </div>
                    </div>

                    <p>As always, thank you to the community for your continued support and bug reports. Drop questions or issues in the <a href="#" onclick="showPage('pg-forum')">Support forum</a>. — <strong style="color:var(--orange);">admin</strong></p>
                </div>

                <!-- Tags -->
                <div style="padding:14px 28px;border-top:1px solid var(--border2);display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
                    <span style="font-size:11px;color:var(--dim);margin-right:4px;"><i class="fas fa-tags"></i></span>
                    <span class="donor-tag" style="color:var(--orange);border-color:rgba(255,136,0,0.3);">TrustCore</span>
                    <span class="donor-tag">iOS 17</span>
                    <span class="donor-tag">Update</span>
                    <span class="donor-tag">Signing</span>
                    <span class="donor-tag">OTA</span>
                </div>
            </div>

            <!-- Comments section -->
            <div class="sec-card">
                <div class="sec-head"><div class="sec-head-title"><i class="fas fa-comments"></i> Replies</div><div class="sec-head-meta">22 replies</div></div>

                <div class="comment-row">
                    <div class="cm-av" style="border-color:var(--cyan);color:var(--cyan);">ZE</div>
                    <div class="cm-body">
                        <div class="cm-header"><span class="cm-name" style="color:var(--cyan);">ZEFv</span><span class="cm-role dev">Developer</span><span class="cm-time">1 hour ago</span></div>
                        <div class="cm-text">Confirmed working on iPhone 14 Pro Max with iOS 17.4. Sign time is noticeably faster. The entitlement fix is a massive deal for push-reliant apps.</div>
                        <div class="cm-actions"><span><i class="fas fa-thumbs-up"></i> 14</span><span><i class="fas fa-reply"></i> Reply</span></div>
                    </div>
                </div>
                <div class="comment-row">
                    <div class="cm-av" style="border-color:var(--yellow);color:var(--yellow);">iD</div>
                    <div class="cm-body">
                        <div class="cm-header"><span class="cm-name" style="color:var(--yellow);">iOS_Dev</span><span class="cm-role encoder">Encoder</span><span class="cm-time">58 min ago</span></div>
                        <div class="cm-text">Just re-signed all the tweaked builds in the library against v4.2. Everything passed. Will upload updated IPAs for the apps that had entitlement issues shortly.</div>
                        <div class="cm-actions"><span><i class="fas fa-thumbs-up"></i> 9</span><span><i class="fas fa-reply"></i> Reply</span></div>
                    </div>
                </div>
                <div class="comment-row">
                    <div class="cm-av">xX</div>
                    <div class="cm-body">
                        <div class="cm-header"><span class="cm-name">xXDarkXx</span><span class="cm-time">44 min ago</span></div>
                        <div class="cm-text">The 40% speed improvement is real. Used to wait like 55 seconds, now it's done in under 30. 🔥</div>
                        <div class="cm-actions"><span><i class="fas fa-thumbs-up"></i> 6</span><span><i class="fas fa-reply"></i> Reply</span></div>
                    </div>
                </div>
                <div class="comment-row">
                    <div class="cm-av">n3</div>
                    <div class="cm-body">
                        <div class="cm-header"><span class="cm-name">n3wbie_42</span><span class="cm-time">31 min ago</span></div>
                        <div class="cm-text">Hey, does this work on iPhone XR with iOS 16.7.8? I tried signing Spotify++ and it just says "failed to install". Any help appreciated 🙏</div>
                        <div class="cm-actions"><span><i class="fas fa-thumbs-up"></i> 0</span><span><i class="fas fa-reply"></i> Reply</span></div>
                    </div>
                </div>
                <!-- Reply box -->
                <div style="padding:16px;border-top:1px solid var(--border2);display:flex;gap:10px;align-items:flex-start;">
                    <div style="width:34px;height:34px;border-radius:50%;background:var(--card2);border:2px solid var(--cyan);display:flex;align-items:center;justify-content:center;font-family:'Oswald',sans-serif;font-size:12px;font-weight:700;color:var(--cyan);flex-shrink:0;">VX</div>
                    <div style="flex:1;display:flex;flex-direction:column;gap:8px;">
                        <textarea placeholder="Write a reply..." style="background:#0a0a0a;border:1px solid var(--border);color:#fff;padding:10px 14px;font-size:13px;font-family:'Rajdhani',sans-serif;outline:none;width:100%;resize:vertical;min-height:72px;"></textarea>
                        <div style="display:flex;justify-content:flex-end;">
                            <button style="background:var(--orange);border:none;color:#000;padding:7px 24px;font-family:'Oswald',sans-serif;font-size:13px;font-weight:700;letter-spacing:0.5px;cursor:pointer;">POST REPLY</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Article sidebar -->
        <div style="display:flex;flex-direction:column;gap:16px;">
            <div class="sec-card">
                <div class="sec-head"><div class="sec-head-title"><i class="fas fa-newspaper"></i> More News</div></div>
                <div style="display:flex;flex-direction:column;gap:0;">
                    <div onclick="showPage('pg-article')" style="padding:10px 14px;border-bottom:1px solid var(--border2);cursor:pointer;transition:background 0.15s;" onmouseover="this.style.background='rgba(255,255,255,0.02)'" onmouseout="this.style.background='transparent'">
                        <div style="font-size:12px;font-weight:600;color:var(--white);line-height:1.4;margin-bottom:4px;">How to Install Without a Computer</div>
                        <div style="font-size:10px;color:var(--dim);">Yesterday · <span class="nl-tag guide" style="font-size:8px;padding:1px 4px;">GUIDE</span></div>
                    </div>
                    <div onclick="showPage('pg-article')" style="padding:10px 14px;border-bottom:1px solid var(--border2);cursor:pointer;transition:background 0.15s;" onmouseover="this.style.background='rgba(255,255,255,0.02)'" onmouseout="this.style.background='transparent'">
                        <div style="font-size:12px;font-weight:600;color:var(--white);line-height:1.4;margin-bottom:4px;">50 New IPAs Added — Spotify++, YT Music</div>
                        <div style="font-size:10px;color:var(--dim);">3 days ago · <span class="nl-tag release" style="font-size:8px;padding:1px 4px;">NEW</span></div>
                    </div>
                    <div onclick="showPage('pg-article')" style="padding:10px 14px;border-bottom:1px solid var(--border2);cursor:pointer;transition:background 0.15s;" onmouseover="this.style.background='rgba(255,255,255,0.02)'" onmouseout="this.style.background='transparent'">
                        <div style="font-size:12px;font-weight:600;color:var(--white);line-height:1.4;margin-bottom:4px;">MSIGN Server Upgrade — 3x Faster Signing</div>
                        <div style="font-size:10px;color:var(--dim);">5 days ago · <span class="nl-tag announce" style="font-size:8px;padding:1px 4px;">ANNOUNCE</span></div>
                    </div>
                    <div onclick="showPage('pg-article')" style="padding:10px 14px;cursor:pointer;transition:background 0.15s;" onmouseover="this.style.background='rgba(255,255,255,0.02)'" onmouseout="this.style.background='transparent'">
                        <div style="font-size:12px;font-weight:600;color:var(--white);line-height:1.4;margin-bottom:4px;">Beginner's Guide: What is TrustCore?</div>
                        <div style="font-size:10px;color:var(--dim);">1 week ago · <span class="nl-tag guide" style="font-size:8px;padding:1px 4px;">GUIDE</span></div>
                    </div>
                </div>
            </div>

            <div class="sec-card">
                <div class="sec-head"><div class="sec-head-title"><i class="fas fa-tags"></i> Tags</div></div>
                <div style="padding:12px;display:flex;flex-wrap:wrap;gap:6px;">
                    <span class="donor-tag" style="color:var(--orange);border-color:rgba(255,136,0,0.3);">TrustCore</span>
                    <span class="donor-tag">iOS 17</span>
                    <span class="donor-tag">Update</span>
                    <span class="donor-tag">Signing</span>
                    <span class="donor-tag">OTA</span>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* ── App List (Browse All) ── */
.al-row {
    display:grid; grid-template-columns:1fr 140px 80px 80px 100px 120px;
    align-items:center; border-bottom:1px solid var(--border2);
    padding:10px 14px; gap:0; transition:background 0.15s; cursor:pointer;
}
.al-row:last-of-type { border-bottom:none; }
.al-row:hover { background:rgba(0,204,255,0.03); }
.al-app { display:flex; align-items:center; gap:12px; min-width:0; }
.al-icon { width:40px; height:40px; border-radius:9px; flex-shrink:0; overflow:hidden; position:relative; }
.al-icon img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.al-info { min-width:0; }
.al-name { font-size:13px; font-weight:700; color:#fff; display:flex; align-items:center; gap:6px; }
.al-bundle { font-size:10px; color:var(--dim); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.al-badge { font-size:8px; font-weight:700; padding:1px 5px; letter-spacing:0.5px; text-transform:uppercase; border-radius:2px; flex-shrink:0; }
.al-badge.hot     { background:rgba(255,136,0,0.15); color:var(--orange); border:1px solid rgba(255,136,0,0.3); }
.al-badge.new     { background:rgba(0,204,85,0.12); color:var(--green); border:1px solid rgba(0,204,85,0.25); }
.al-badge.updated { background:rgba(0,204,255,0.1); color:var(--cyan); border:1px solid rgba(0,204,255,0.2); }
.al-cell { font-size:12px; color:var(--grey); text-align:center; }
.al-btn {
    padding:5px 14px; background:transparent; border:1px solid var(--orange);
    color:var(--orange); font-family:'Oswald',sans-serif; font-size:12px;
    font-weight:600; letter-spacing:0.5px; text-transform:uppercase;
    cursor:pointer; transition:all 0.15s; width:100%;
}
.al-btn:hover { background:var(--orange); color:#000; }
.pg-btn {
    width:28px; height:28px; background:var(--card2); border:1px solid var(--border);
    color:var(--grey); font-family:'Oswald',sans-serif; font-size:12px;
    cursor:pointer; transition:all 0.15s;
}
.pg-btn:hover { border-color:var(--cyan); color:var(--cyan); }
.pg-btn.active { background:var(--orange); border-color:var(--orange); color:#000; font-weight:700; }

/* ── News List ── */
.nl-row {
    display:flex; gap:0; border-bottom:1px solid var(--border2);
    transition:background 0.15s;
}
.nl-row:hover { background:rgba(255,255,255,0.015); }
.nl-row:last-of-type { border-bottom:none; }
.nl-thumb {
    width:72px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    border-right:1px solid var(--border2);
}
.nl-body { flex:1; padding:14px 18px; min-width:0; }
.nl-meta-top { display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.nl-date { font-size:11px; color:var(--dim); display:flex; align-items:center; gap:4px; }
.nl-title { font-family:'Oswald',sans-serif; font-size:16px; font-weight:600; color:#fff; line-height:1.3; margin-bottom:6px; transition:color 0.15s; }
.nl-row:hover .nl-title { color:var(--cyan); }
.nl-excerpt { font-size:12px; color:var(--dim); line-height:1.6; margin-bottom:10px; }
.nl-footer { display:flex; align-items:center; gap:14px; font-size:11px; color:var(--dim); }
.nl-author { display:flex; align-items:center; gap:4px; }
.nl-stat { display:flex; align-items:center; gap:4px; }
.nl-tag {
    font-size:9px; font-weight:700; padding:2px 6px;
    letter-spacing:0.5px; text-transform:uppercase; border-radius:2px; flex-shrink:0;
}
.nl-tag.update   { background:rgba(255,136,0,0.15); color:var(--orange); border:1px solid rgba(255,136,0,0.3); }
.nl-tag.guide    { background:rgba(0,204,255,0.1); color:var(--cyan); border:1px solid rgba(0,204,255,0.2); }
.nl-tag.release  { background:rgba(0,204,85,0.12); color:var(--green); border:1px solid rgba(0,204,85,0.25); }
.nl-tag.announce { background:rgba(255,204,0,0.1); color:var(--yellow); border:1px solid rgba(255,204,0,0.25); }

/* ── Article Comments ── */
.comment-row {
    display:flex; gap:12px; padding:14px 18px;
    border-bottom:1px solid var(--border2); align-items:flex-start;
}
.comment-row:last-of-type { border-bottom:none; }
.cm-av {
    width:36px; height:36px; border-radius:50%; background:var(--card2);
    border:2px solid var(--border); display:flex; align-items:center;
    justify-content:center; font-family:'Oswald',sans-serif;
    font-size:11px; font-weight:700; color:var(--dim); flex-shrink:0;
}
.cm-body { flex:1; min-width:0; }
.cm-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.cm-name { font-size:13px; font-weight:700; color:#fff; }
.cm-role { font-size:9px; font-weight:700; padding:1px 5px; border-radius:2px; text-transform:uppercase; letter-spacing:0.5px; }
.cm-role.dev     { background:rgba(0,204,255,0.1); color:var(--cyan); border:1px solid rgba(0,204,255,0.2); }
.cm-role.encoder { background:rgba(255,204,0,0.1); color:var(--yellow); border:1px solid rgba(255,204,0,0.2); }
.cm-time { font-size:10px; color:var(--dim); margin-left:auto; }
.cm-text { font-size:13px; color:var(--grey); line-height:1.7; margin-bottom:8px; }
.cm-actions { display:flex; gap:14px; font-size:11px; color:var(--dim); }
.cm-actions span { display:flex; align-items:center; gap:4px; cursor:pointer; transition:color 0.15s; }
.cm-actions span:hover { color:var(--cyan); }

/* ── IPA SUBMIT PAGE ── */
.ipa-submit-shell { display:grid; grid-template-columns:1fr 320px; gap:20px; }
@media(max-width:900px){ .ipa-submit-shell { grid-template-columns:1fr; } }
.submit-step { display:flex; gap:14px; padding:18px 20px; border-bottom:1px solid var(--border2); }
.submit-step:last-child { border-bottom:none; }
.step-num { width:28px; height:28px; border-radius:50%; background:rgba(0,204,255,0.12); border:1px solid rgba(0,204,255,0.3); color:var(--cyan); font-family:'Oswald',sans-serif; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.step-body { flex:1; }
.step-title { font-family:'Oswald',sans-serif; font-size:15px; font-weight:600; color:#fff; margin-bottom:4px; }
.step-desc { font-size:12px; color:var(--dim); margin-bottom:12px; line-height:1.6; }
.ipa-dropzone { border:2px dashed rgba(0,204,255,0.25); background:rgba(0,204,255,0.03); padding:32px 20px; text-align:center; cursor:pointer; transition:all 0.2s; border-radius:4px; }
.ipa-dropzone:hover, .ipa-dropzone.drag-over { border-color:var(--cyan); background:rgba(0,204,255,0.07); }
.ipa-dropzone .dz-icon { font-size:32px; color:var(--cyan); opacity:0.4; margin-bottom:10px; }
.ipa-dropzone .dz-title { font-family:'Oswald',sans-serif; font-size:14px; font-weight:600; color:var(--grey); margin-bottom:4px; }
.ipa-dropzone .dz-sub { font-size:11px; color:var(--dim); }
.ipa-dropzone .dz-types { font-size:10px; color:var(--cyan); opacity:0.6; margin-top:6px; font-family:'JetBrains Mono',monospace; }
.upload-progress { display:none; padding:14px 0; }
.up-bar-wrap { height:6px; background:var(--border); border-radius:3px; overflow:hidden; margin-bottom:6px; }
.up-bar { height:100%; background:var(--cyan); border-radius:3px; width:0; transition:width 0.3s; }
.up-label { font-size:11px; color:var(--dim); display:flex; justify-content:space-between; }
.ss-upload-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:8px; margin-top:8px; }
.ss-upload-slot { height:120px; border:1px dashed rgba(255,255,255,0.15); border-radius:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; transition:all 0.2s; background:rgba(255,255,255,0.02); font-size:10px; color:var(--dim); }
.ss-upload-slot:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(0,204,255,0.04); }
.ss-upload-slot.filled { border-color:rgba(0,204,255,0.3); background:rgba(0,204,255,0.06); color:var(--cyan); }
.dylib-inject-row { display:flex; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid var(--border2); }
.dylib-inject-row:last-child { border-bottom:none; }
.dylib-tag { background:rgba(0,204,255,0.08); border:1px solid rgba(0,204,255,0.2); color:var(--cyan); font-family:'JetBrains Mono',monospace; font-size:10px; padding:3px 8px; border-radius:3px; flex:1; }
.submit-sidebar-card { background:var(--card); border:1px solid var(--border); }
.submit-sidebar-head { padding:12px 16px; border-bottom:1px solid var(--border2); font-family:'Oswald',sans-serif; font-size:13px; font-weight:600; color:var(--grey); letter-spacing:0.5px; display:flex; align-items:center; gap:8px; }
.submit-sidebar-body { padding:14px 16px; }
.guideline-row { display:flex; gap:8px; padding:6px 0; border-bottom:1px solid var(--border2); font-size:12px; color:var(--grey); line-height:1.5; }
.guideline-row:last-child { border-bottom:none; }
.guideline-row i { flex-shrink:0; margin-top:2px; }
.progress-tracker { padding:16px; }
.pt-step { display:flex; gap:10px; align-items:flex-start; padding:6px 0; }
.pt-dot { width:8px; height:8px; border-radius:50%; background:var(--border); border:2px solid var(--border); margin-top:4px; flex-shrink:0; transition:all 0.3s; }
.pt-dot.done { background:var(--green); border-color:var(--green); }
.pt-dot.active { background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 6px rgba(0,204,255,0.5); }
.pt-text { font-size:12px; color:var(--dim); }
.pt-text.done { color:var(--green); }
.pt-text.active { color:var(--white); font-weight:600; }
</style>

<!-- ══════════════════════════════════════════════
     MY LIBRARY PAGE
══════════════════════════════════════════════ -->
<div id="pg-library" class="page-wrap" style="display:none;">

    <div class="page-banner" style="border-left-color:var(--cyan);background:linear-gradient(90deg,rgba(0,204,255,0.06),transparent 60%);">
        <div class="page-banner-icon" style="color:var(--cyan);"><i class="fas fa-folder-open"></i></div>
        <div class="page-banner-text">
            <h2>My Library</h2>
            <p>Your signed apps, uploads, and signing history. <?php echo htmlspecialchars($userTier); ?> plan — <?php echo $signsUsed; ?> of <?php echo $signsMax; ?> signs used today.</p>
        </div>
    </div>

    <div style="display:grid;grid-template-columns:1fr 280px;gap:16px;">
        <div style="display:flex;flex-direction:column;gap:16px;">

            <!-- Upload IPA CTA -->
            <div style="background:rgba(0,204,255,0.04);border:1px dashed rgba(0,204,255,0.25);padding:20px;display:flex;align-items:center;gap:20px;cursor:pointer;transition:all 0.2s;" onmouseover="this.style.background='rgba(0,204,255,0.07)'" onmouseout="this.style.background='rgba(0,204,255,0.04)'" onclick="showPage('pg-sign')">
                <div style="width:52px;height:52px;border-radius:12px;background:rgba(0,204,255,0.1);border:1px solid rgba(0,204,255,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <i class="fas fa-plus" style="font-size:22px;color:var(--cyan);"></i>
                </div>
                <div>
                    <div style="font-family:'Oswald',sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:3px;">Sign a New App</div>
                    <div style="font-size:12px;color:var(--dim);">Choose from the library or upload your own IPA — Max 500MB for Premium</div>
                </div>
                <div style="margin-left:auto;flex-shrink:0;">
                    <button onclick="showPage('pg-sign')" style="background:var(--cyan);border:none;color:#000;padding:9px 22px;font-family:'Oswald',sans-serif;font-size:13px;font-weight:700;letter-spacing:0.5px;cursor:pointer;">+ SIGN APP</button>
                </div>
            </div>

            <!-- Tabs -->
            <div class="sec-card">
                <div class="sec-head">
                    <div class="sec-head-title"><i class="fas fa-layer-group"></i> My Apps</div>
                    <div class="sec-head-meta">0 signed apps</div>
                </div>
                <div class="app-filter-tabs">
                    <div class="app-tab active" onclick="setTab(this)"><i class="fas fa-layer-group" style="font-size:11px;"></i> ALL</div>
                    <div class="app-tab" onclick="setTab(this)"><i class="fas fa-check-circle" style="font-size:11px;"></i> SIGNED</div>
                    <div class="app-tab" onclick="setTab(this)"><i class="fas fa-upload" style="font-size:11px;"></i> UPLOADED</div>
                    <div class="app-tab" onclick="setTab(this)"><i class="fas fa-exclamation-circle" style="font-size:11px;"></i> EXPIRED</div>
                </div>

                <!-- Library app rows — populated from DB -->
                <div style="padding:32px 20px;text-align:center;color:var(--dim);">
                    <i class="fas fa-folder-open" style="font-size:36px;margin-bottom:12px;display:block;opacity:0.25;"></i>
                    <div style="font-family:'Oswald',sans-serif;font-size:15px;color:var(--grey);margin-bottom:6px;">No signed apps yet</div>
                    <div style="font-size:12px;margin-bottom:16px;">Sign your first app to see it here.</div>
                    <button onclick="showPage('pg-sign')" style="background:var(--cyan);border:none;color:#000;padding:9px 22px;font-family:'Oswald',sans-serif;font-size:13px;font-weight:700;letter-spacing:0.5px;cursor:pointer;">+ SIGN APP</button>
                </div>
            </div>
        </div>

        <!-- Library sidebar -->
        <div style="display:flex;flex-direction:column;gap:16px;">

            <!-- Usage summary -->
            <div class="sec-card">
                <div class="sec-head"><div class="sec-head-title"><i class="fas fa-tachometer-alt"></i> Today's Usage</div></div>
                <div style="padding:16px;">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
                        <span style="font-size:12px;color:var(--grey);">Signs Used</span>
                        <span style="font-family:'Oswald',sans-serif;font-size:16px;font-weight:700;color:var(--cyan);"><?php echo $signsUsed; ?> <span style="color:var(--dim);font-size:12px;font-weight:400;">/ <?php echo $signsMax; ?></span></span>
                    </div>
                    <div style="height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:6px;">
                        <div style="height:100%;width:<?php echo $quotaPct; ?>%;background:var(--cyan);border-radius:3px;"></div>
                    </div>
                    <div style="font-size:10px;color:var(--dim);">Resets in 24h</div>
                </div>
                <div style="border-top:1px solid var(--border2);">
                    <div class="qs-row"><div class="qs-icon"><i class="fas fa-box"></i></div><div class="qs-label">Total Signed</div><div class="qs-val orange">0</div></div>
                    <div class="qs-row"><div class="qs-icon"><i class="fas fa-upload"></i></div><div class="qs-label">Custom Uploads</div><div class="qs-val orange">0</div></div>
                    <div class="qs-row" style="border-bottom:none;"><div class="qs-icon"><i class="fas fa-exclamation-circle"></i></div><div class="qs-label">Revoked</div><div class="qs-val" style="color:var(--yellow);">0</div></div>
                </div>
            </div>

            <!-- Plan -->
            <div class="sec-card">
                <div class="sec-head"><div class="sec-head-title"><i class="fas fa-bolt"></i> Your Plan</div></div>
                <div style="padding:16px;text-align:center;">
                    <div style="font-family:'Oswald',sans-serif;font-size:22px;font-weight:700;color:var(--cyan);margin-bottom:4px;"><?php echo strtoupper($userTier); ?></div>
                    <div style="font-size:11px;color:var(--dim);margin-bottom:14px;"><?php echo $signsMax; ?> signs/day</div>
                    <button onclick="show('upgrade',document.querySelector('.upgrade'))" style="width:100%;background:var(--orange);border:none;color:#000;padding:9px;font-family:'Oswald',sans-serif;font-size:13px;font-weight:700;letter-spacing:0.5px;cursor:pointer;">UPGRADE →</button>
                </div>
            </div>

            <!-- Signing history -->
            <div class="sec-card">
                <div class="sec-head"><div class="sec-head-title"><i class="fas fa-history"></i> Sign History</div></div>
                <div style="padding:18px;text-align:center;color:var(--dim);font-size:12px;">
                    <i class="fas fa-history" style="font-size:20px;margin-bottom:6px;display:block;opacity:0.25;"></i>
                    No signing history yet.
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ══════════════════════════════════════════════
     SIGN APP PAGE
══════════════════════════════════════════════ -->
<div id="pg-sign" class="page-wrap" style="display:none;">

    <div class="page-banner" style="border-left-color:var(--orange);background:linear-gradient(90deg,rgba(255,136,0,0.06),transparent 60%);">
        <div class="page-banner-icon" style="color:var(--orange);"><i class="fas fa-pen-nib"></i></div>
        <div class="page-banner-text">
            <h2>Sign an App</h2>
            <p>Choose from the library or upload a custom IPA · TrustCore v4.2 · Server: <span style="color:var(--green);">● Online</span> · Avg. sign time: <strong style="color:#fff;">~33s</strong></p>
        </div>
    </div>

    <div style="display:grid;grid-template-columns:1fr 300px;gap:16px;">
        <div style="display:flex;flex-direction:column;gap:16px;">

            <!-- Step 1: Choose app -->
            <div class="sec-card" id="step1">
                <div class="sec-head orange">
                    <div class="sec-head-title"><i class="fas fa-search"></i> Step 1 — Choose App</div>
                    <div class="sec-head-meta">Pick from library or upload your own</div>
                </div>

                <!-- Source tabs -->
                <div style="display:flex;border-bottom:1px solid var(--border2);">
                    <div class="sign-tab active" id="tab-library" onclick="switchSignTab('library')"><i class="fas fa-th"></i> From Library</div>
                    <div class="sign-tab" id="tab-upload" onclick="switchSignTab('upload')"><i class="fas fa-upload"></i> Upload IPA</div>
                </div>

                <!-- Library picker -->
                <div id="panel-library" style="padding:14px;">
                    <div style="display:flex;gap:8px;margin-bottom:14px;">
                        <input type="text" placeholder="Search library..." style="flex:1;background:#0a0a0a;border:1px solid var(--border);color:#fff;padding:7px 14px;font-size:13px;font-family:'Rajdhani',sans-serif;outline:none;">
                        <select style="background:var(--card2);border:1px solid var(--border);color:var(--grey);padding:7px 10px;font-size:12px;font-family:'Rajdhani',sans-serif;outline:none;">
                            <option>All Categories</option>
                            <option>Social</option><option>Media</option><option>Games</option><option>Tools</option>
                        </select>
                    </div>
                    <!-- Selectable app grid -->
                    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;">

                        <div class="sign-app-card selected" id="sac-spotify" onclick="selectSignApp(this,'Spotify++','com.spotify.client','v8.9.12','68 MB')">
                            <div class="sac-icon" style="background:#191414;"><img src="https://cdn.simpleicons.org/spotify/1ED760" width="26" height="26"></div>
                            <div class="sac-info"><div class="sac-name">Spotify++</div><div class="sac-ver">v8.9.12 · 68 MB</div></div>
                            <div class="sac-check"><i class="fas fa-check-circle"></i></div>
                        </div>
                        <div class="sign-app-card" onclick="selectSignApp(this,'YouTube Music++','com.google.ios.ytmusic','v7.2.1','112 MB')">
                            <div class="sac-icon" style="background:#ff0000;"><img src="https://cdn.simpleicons.org/youtube/ffffff" width="26" height="26"></div>
                            <div class="sac-info"><div class="sac-name">YouTube Music++</div><div class="sac-ver">v7.2.1 · 112 MB</div></div>
                            <div class="sac-check"><i class="fas fa-check-circle"></i></div>
                        </div>
                        <div class="sign-app-card" onclick="selectSignApp(this,'Instagram++','com.burbn.instagram','v263.0','94 MB')">
                            <div class="sac-icon" style="background:radial-gradient(circle at 30% 110%,#f09433,#dc2743 50%,#bc1888);"><img src="https://cdn.simpleicons.org/instagram/ffffff" width="26" height="26"></div>
                            <div class="sac-info"><div class="sac-name">Instagram++</div><div class="sac-ver">v263.0 · 94 MB</div></div>
                            <div class="sac-check"><i class="fas fa-check-circle"></i></div>
                        </div>
                        <div class="sign-app-card" onclick="selectSignApp(this,'Snapchat++','com.toyopagroup.picaboo','v12.85','210 MB')">
                            <div class="sac-icon" style="background:#FFFC00;"><img src="https://cdn.simpleicons.org/snapchat/000000" width="26" height="26"></div>
                            <div class="sac-info"><div class="sac-name">Snapchat++</div><div class="sac-ver">v12.85 · 210 MB</div></div>
                            <div class="sac-check"><i class="fas fa-check-circle"></i></div>
                        </div>
                        <div class="sign-app-card" onclick="selectSignApp(this,'Discord++','com.hammerandchisel.discord','v222.0','88 MB')">
                            <div class="sac-icon" style="background:#0d1117;"><img src="https://cdn.simpleicons.org/discord/5865F2" width="26" height="26"></div>
                            <div class="sac-info"><div class="sac-name">Discord++</div><div class="sac-ver">v222.0 · 88 MB</div></div>
                            <div class="sac-check"><i class="fas fa-check-circle"></i></div>
                        </div>
                        <div class="sign-app-card" onclick="selectSignApp(this,'TikTok++','com.zhiliaoapp.musically','v33.2.0','175 MB')">
                            <div class="sac-icon" style="background:#010101;"><img src="https://cdn.simpleicons.org/tiktok/ffffff" width="26" height="26"></div>
                            <div class="sac-info"><div class="sac-name">TikTok++</div><div class="sac-ver">v33.2.0 · 175 MB</div></div>
                            <div class="sac-check"><i class="fas fa-check-circle"></i></div>
                        </div>
                    </div>
                </div>

                <!-- Upload panel (hidden by default) -->
                <div id="panel-upload" style="display:none;padding:20px;">
                    <!-- Hidden real file input -->
                    <input type="file" id="ipa-file-real" accept=".ipa" style="display:none;" onchange="if(this.files[0])simulateIPAUpload(this.files[0]);">
                    <!-- Drop zone -->
                    <div id="ipa-drop-zone" style="border:2px dashed var(--border);border-radius:4px;padding:36px 20px;text-align:center;cursor:pointer;transition:all 0.2s;"
                        onmouseover="this.style.borderColor='var(--orange)';this.style.background='rgba(255,136,0,0.04)'"
                        onmouseout="this.style.borderColor=ipaLoaded?'rgba(0,204,85,.4)':' var(--border)';this.style.background=ipaLoaded?'rgba(0,204,85,.03)':'transparent'"
                        onclick="document.getElementById('ipa-file-real').click()"
                        ondragover="event.preventDefault();this.style.borderColor='var(--cyan)';this.style.background='rgba(0,204,255,0.04)'"
                        ondragleave="this.style.borderColor='var(--border)';this.style.background='transparent'"
                        ondrop="event.preventDefault();var f=event.dataTransfer.files[0];if(f&&f.name.endsWith('.ipa'))simulateIPAUpload(f);else showToast('error','Invalid File','Please drop a .ipa file.',3000);">
                        <i id="ipa-drop-icon" class="fas fa-file-upload" style="font-size:36px;color:var(--dim);margin-bottom:12px;display:block;"></i>
                        <div id="ipa-drop-title" style="font-family:'Oswald',sans-serif;font-size:16px;color:#fff;margin-bottom:6px;">Drag &amp; Drop your IPA here</div>
                        <div id="ipa-drop-sub" style="font-size:12px;color:var(--dim);margin-bottom:16px;">or click to browse · Max 500MB (Premium)</div>
                        <button id="ipa-browse-btn" style="background:var(--orange);border:none;color:#000;padding:8px 24px;font-family:'Oswald',sans-serif;font-size:13px;font-weight:700;letter-spacing:0.5px;cursor:pointer;" onclick="event.stopPropagation();document.getElementById('ipa-file-real').click()">BROWSE FILE</button>
                    </div>

                    <!-- Parsing indicator (shown mid-upload) -->
                    <div id="ipa-parsing" style="display:none;border:1px solid var(--border);background:var(--card2);padding:18px 20px;margin-top:12px;">
                        <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;">
                            <i class="fas fa-spinner fa-spin" style="color:var(--orange);font-size:18px;flex-shrink:0;"></i>
                            <div>
                                <div id="ipa-parse-status" style="font-family:'Oswald',sans-serif;font-size:14px;color:#fff;">Uploading IPA...</div>
                                <div style="font-size:10px;color:var(--dim);margin-top:2px;">Scanning binary &amp; extracting metadata</div>
                            </div>
                        </div>
                        <div style="height:4px;background:var(--border);border-radius:2px;overflow:hidden;">
                            <div id="ipa-parse-bar" style="height:100%;background:var(--orange);border-radius:2px;width:0%;transition:width .4s ease;"></div>
                        </div>
                    </div>

                    <!-- Parsed result card (shown after parse) -->
                    <div id="ipa-parsed" style="display:none;border:1px solid rgba(0,204,85,.25);background:rgba(0,204,85,.03);margin-top:12px;">
                        <!-- Header row -->
                        <div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(0,204,85,.15);">
                            <div id="ipa-parsed-icon" style="width:44px;height:44px;border-radius:10px;background:#191414;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:22px;">📦</div>
                            <div style="flex:1;min-width:0;">
                                <div id="ipa-parsed-name" style="font-family:'Oswald',sans-serif;font-size:16px;font-weight:700;color:#fff;"></div>
                                <div id="ipa-parsed-bundle" style="font-size:10px;color:var(--dim);font-family:'JetBrains Mono',monospace;margin-top:2px;"></div>
                            </div>
                            <div style="flex-shrink:0;text-align:right;">
                                <div style="background:rgba(0,204,85,.12);color:var(--green);border:1px solid rgba(0,204,85,.3);font-family:'Oswald',sans-serif;font-size:9px;font-weight:700;letter-spacing:.5px;padding:2px 8px;margin-bottom:4px;">✓ PARSED</div>
                                <div id="ipa-parsed-size" style="font-size:10px;color:var(--dim);"></div>
                            </div>
                        </div>
                        <!-- Metadata grid -->
                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--border2);">
                            <div style="background:var(--card2);padding:10px 14px;">
                                <div style="font-size:9px;color:var(--dim);font-family:'Oswald',sans-serif;letter-spacing:.5px;text-transform:uppercase;margin-bottom:3px;">Version</div>
                                <div id="ipa-parsed-ver" style="font-size:13px;color:#fff;font-family:'JetBrains Mono',monospace;"></div>
                            </div>
                            <div style="background:var(--card2);padding:10px 14px;">
                                <div style="font-size:9px;color:var(--dim);font-family:'Oswald',sans-serif;letter-spacing:.5px;text-transform:uppercase;margin-bottom:3px;">Min iOS</div>
                                <div id="ipa-parsed-minos" style="font-size:13px;color:#fff;font-family:'JetBrains Mono',monospace;"></div>
                            </div>
                            <div style="background:var(--card2);padding:10px 14px;border-top:1px solid var(--border2);">
                                <div style="font-size:9px;color:var(--dim);font-family:'Oswald',sans-serif;letter-spacing:.5px;text-transform:uppercase;margin-bottom:3px;">Arch</div>
                                <div id="ipa-parsed-arch" style="font-size:13px;color:#fff;font-family:'JetBrains Mono',monospace;"></div>
                            </div>
                            <div style="background:var(--card2);padding:10px 14px;border-top:1px solid var(--border2);">
                                <div style="font-size:9px;color:var(--dim);font-family:'Oswald',sans-serif;letter-spacing:.5px;text-transform:uppercase;margin-bottom:3px;">Entitlements</div>
                                <div id="ipa-parsed-ent" style="font-size:13px;color:#fff;font-family:'JetBrains Mono',monospace;"></div>
                            </div>
                        </div>
                        <!-- MDID row (auto-fetched from IPA) -->
                        <div style="padding:10px 16px;border-top:1px solid rgba(0,204,85,.15);display:flex;align-items:center;gap:10px;">
                            <div style="flex:1;">
                                <div style="font-size:9px;color:var(--dim);font-family:'Oswald',sans-serif;letter-spacing:.5px;text-transform:uppercase;margin-bottom:3px;">MDID <span style="color:var(--green);"> — AUTO-FETCHED</span></div>
                                <div id="ipa-parsed-mdid" style="font-size:11px;color:var(--green);font-family:'JetBrains Mono',monospace;word-break:break-all;"></div>
                            </div>
                            <button onclick="copyIPAMDID()" style="background:rgba(0,204,85,.1);border:1px solid rgba(0,204,85,.3);color:var(--green);padding:4px 10px;font-family:'Oswald',sans-serif;font-size:10px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;">COPY</button>
                        </div>
                        <!-- Replace button -->
                        <div style="padding:10px 16px;border-top:1px solid rgba(0,204,85,.15);text-align:right;">
                            <a href="#" style="font-size:11px;color:var(--dim);font-family:'Oswald',sans-serif;letter-spacing:.3px;" onclick="resetIPAUpload(event)"><i class="fas fa-redo" style="font-size:9px;"></i> Replace IPA</a>
                        </div>
                    </div>

                    <div id="ipa-hints" style="margin-top:14px;font-size:11px;color:var(--dim);display:flex;flex-direction:column;gap:4px;">
                        <div><i class="fas fa-info-circle" style="color:var(--cyan);margin-right:4px;"></i> Only .ipa files are accepted</div>
                        <div><i class="fas fa-info-circle" style="color:var(--cyan);margin-right:4px;"></i> MDID is auto-extracted from the embedded provisioning profile</div>
                        <div><i class="fas fa-info-circle" style="color:var(--cyan);margin-right:4px;"></i> Private uploads are only visible to you</div>
                    </div>
                </div>
            </div>

            <!-- Step 2: Options -->
            <div class="sec-card" id="step2">
                <div class="sec-head orange">
                    <div class="sec-head-title"><i class="fas fa-sliders-h"></i> Step 2 — Signing Options</div>
                </div>
                <div style="padding:18px 20px;display:flex;flex-direction:column;gap:14px;">

                    <div class="opt-row">
                        <div class="opt-info">
                            <div class="opt-label">Install Method</div>
                            <div class="opt-desc">How the signed app will be installed on your device</div>
                        </div>
                        <div style="display:flex;gap:8px;">
                            <div class="opt-choice selected" onclick="selectChoice(this)">OTA</div>
                            <div class="opt-choice" onclick="selectChoice(this)">TrollStore</div>
                        </div>
                    </div>

                    <!-- MDID row -->
                    <div class="opt-row" id="mdid-row">
                        <div class="opt-info">
                            <div class="opt-label" style="display:flex;align-items:center;gap:6px;">
                                MDID
                                <span id="mdid-fetch-badge" style="display:none;background:rgba(0,204,85,.12);color:var(--green);border:1px solid rgba(0,204,85,.3);font-size:8px;font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.5px;padding:1px 5px;">AUTO-FETCHED</span>
                            </div>
                            <div class="opt-desc">Your device MDID — required for OTA signing</div>
                        </div>
                        <div style="display:flex;flex-direction:column;align-items:flex-end;gap:4px;">
                            <input id="sign-mdid" type="text" placeholder="Paste MDID or fetch from IPA" maxlength="50"
                                style="background:#0a0a0a;border:1px solid var(--border);color:#fff;padding:6px 10px;font-size:11px;font-family:'JetBrains Mono',monospace;outline:none;width:240px;transition:border-color .15s;"
                                onfocus="this.style.borderColor='var(--orange)'" onblur="this.style.borderColor='var(--border)'"/>
                            <div style="font-size:10px;color:var(--dim);">
                                <a href="#" style="color:var(--orange);font-family:'Oswald',sans-serif;font-size:9px;letter-spacing:.5px;" onclick="fetchMDIDFromIPA(event)"><i class="fas fa-magic" style="font-size:8px;"></i> FETCH FROM IPA</a>
                            </div>
                        </div>
                    </div>

                    <!-- Delivery email row -->
                    <div class="opt-row" id="email-row">
                        <div class="opt-info">
                            <div class="opt-label" style="display:flex;align-items:center;gap:6px;">
                                Delivery Email
                                <span id="email-prefill-badge" style="background:rgba(255,136,0,.12);color:var(--orange);border:1px solid rgba(255,136,0,.3);font-size:8px;font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.5px;padding:1px 5px;">PREFILLED</span>
                            </div>
                            <div class="opt-desc">OTA install link sent here after signing</div>
                        </div>
                        <div style="display:flex;flex-direction:column;align-items:flex-end;gap:4px;">
                            <input id="sign-email" type="email" value="<?php echo htmlspecialchars($loggedIn ? ($user['email'] ?? '') : ''); ?>"
                                style="background:#0a0a0a;border:1px solid rgba(255,136,0,.3);color:var(--orange);padding:6px 10px;font-size:11px;font-family:'JetBrains Mono',monospace;outline:none;width:240px;transition:border-color .15s;"
                                onfocus="this.style.borderColor='var(--orange)'" onblur="this.style.borderColor='rgba(255,136,0,.3)'"/>
                            <div style="font-size:10px;color:var(--dim);">Pulled from your account · <a href="#" style="color:var(--dim);" onclick="event.preventDefault()">change</a></div>
                        </div>
                    </div>

                    <div class="opt-row">
                        <div class="opt-info">
                            <div class="opt-label">App Name Override</div>
                            <div class="opt-desc">Custom name shown on your home screen (optional)</div>
                        </div>
                        <input type="text" placeholder="e.g. Spotify (Tweaked)" style="background:#0a0a0a;border:1px solid var(--border);color:#fff;padding:6px 12px;font-size:12px;font-family:'Rajdhani',sans-serif;outline:none;width:200px;">
                    </div>

                    <div class="opt-row">
                        <div class="opt-info">
                            <div class="opt-label">Bundle ID Override</div>
                            <div class="opt-desc">Run alongside the original app (creates separate entry)</div>
                        </div>
                        <div class="opt-toggle" id="toggle-bundle" onclick="toggleOpt(this)"><div class="opt-toggle-knob"></div></div>
                    </div>

                    <div class="opt-row">
                        <div class="opt-info">
                            <div class="opt-label">Strip Entitlements</div>
                            <div class="opt-desc">Remove problematic entitlements that can cause crashes on 17.5+</div>
                        </div>
                        <div class="opt-toggle on" id="toggle-ent" onclick="toggleOpt(this)"><div class="opt-toggle-knob"></div></div>
                    </div>

                    <div class="opt-row" style="border-bottom:none;padding-bottom:0;">
                        <div class="opt-info">
                            <div class="opt-label">Force Minimum iOS</div>
                            <div class="opt-desc">Override the minimum iOS version in the binary</div>
                        </div>
                        <select style="background:var(--card2);border:1px solid var(--border);color:var(--grey);padding:6px 10px;font-size:12px;font-family:'Rajdhani',sans-serif;outline:none;cursor:pointer;">
                            <option>Don't Override</option>
                            <option>iOS 14.0</option><option>iOS 15.0</option><option>iOS 16.0</option><option>iOS 17.0</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Step 3: Confirm & Sign -->
            <div class="sec-card" id="step3">
                <div class="sec-head orange">
                    <div class="sec-head-title"><i class="fas fa-rocket"></i> Step 3 — Confirm & Sign</div>
                    <div class="sec-head-meta" style="color:var(--cyan);">6 of 25 signs used today</div>
                </div>
                <div style="padding:16px 20px;">
                    <!-- Summary box -->
                    <div style="background:var(--card2);border:1px solid var(--border);padding:14px 18px;margin-bottom:16px;display:flex;gap:16px;align-items:center;">
                        <div id="confirm-icon" style="width:48px;height:48px;border-radius:11px;background:#191414;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;">
                            <img src="https://cdn.simpleicons.org/spotify/1ED760" width="28" height="28">
                        </div>
                        <div style="flex:1;">
                            <div id="confirm-name" style="font-family:'Oswald',sans-serif;font-size:18px;font-weight:700;color:#fff;">Spotify++</div>
                            <div id="confirm-bundle" style="font-size:11px;color:var(--dim);margin-top:2px;">com.spotify.client · v8.9.12 · 68 MB</div>
                        </div>
                        <div style="text-align:right;flex-shrink:0;">
                            <div style="font-size:11px;color:var(--dim);">Method: <span style="color:var(--cyan);">OTA</span></div>
                            <div style="font-size:11px;color:var(--dim);">Engine: <span style="color:var(--white);">TrustCore v4.2</span></div>
                            <div style="font-size:11px;color:var(--dim);">Est. time: <span style="color:var(--green);">~33s</span></div>
                        </div>
                    </div>

                    <!-- Sign button / progress -->
                    <div id="sign-idle">
                        <button onclick="startSigning()" style="width:100%;background:var(--orange);border:none;color:#000;padding:13px;font-family:'Oswald',sans-serif;font-size:16px;font-weight:700;letter-spacing:1px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all 0.2s;">
                            <i class="fas fa-pen-nib"></i> SIGN NOW — 1 Credit
                        </button>
                    </div>

                    <!-- Signing progress (shown after click) -->
                    <div id="sign-progress" style="display:none;">
                        <div style="border:1px solid var(--border);padding:20px;background:var(--card2);">
                            <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
                                <i class="fas fa-spinner fa-spin" style="color:var(--cyan);font-size:18px;flex-shrink:0;"></i>
                                <div>
                                    <div id="sign-status-text" style="font-family:'Oswald',sans-serif;font-size:15px;color:#fff;">Connecting to signing server...</div>
                                    <div style="font-size:11px;color:var(--dim);margin-top:2px;">TrustCore v4.2 · Priority Queue</div>
                                </div>
                            </div>
                            <div style="height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:10px;">
                                <div id="sign-bar" style="height:100%;background:var(--cyan);border-radius:3px;width:0%;transition:width 0.5s ease;"></div>
                            </div>
                            <div style="display:flex;justify-content:space-between;font-size:11px;color:var(--dim);">
                                <span id="sign-step">Step 1/4: Uploading</span>
                                <span id="sign-pct">0%</span>
                            </div>
                        </div>
                    </div>

                    <!-- Done state -->
                    <div id="sign-done" style="display:none;">
                        <div style="border:1px solid rgba(0,204,85,0.25);background:rgba(0,204,85,0.05);padding:20px;text-align:center;">
                            <i class="fas fa-check-circle" style="font-size:36px;color:var(--green);margin-bottom:10px;display:block;"></i>
                            <div style="font-family:'Oswald',sans-serif;font-size:18px;color:#fff;margin-bottom:6px;">Signing Complete!</div>
                            <div style="font-size:12px;color:var(--dim);margin-bottom:16px;">Spotify++ v8.9.12 is ready to install</div>
                            <div style="display:flex;gap:10px;justify-content:center;">
                                <button style="background:var(--green);border:none;color:#000;padding:10px 28px;font-family:'Oswald',sans-serif;font-size:14px;font-weight:700;letter-spacing:0.5px;cursor:pointer;"><i class="fas fa-download"></i> INSTALL NOW</button>
                                <button onclick="showPage('pg-library')" style="background:transparent;border:1px solid var(--border);color:var(--grey);padding:10px 20px;font-family:'Oswald',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.15s;">MY LIBRARY</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>

        <!-- Sign sidebar -->
        <div style="display:flex;flex-direction:column;gap:16px;">

            <!-- Live Queue -->
            <div class="sec-card">
                <div class="sec-head orange"><div class="sec-head-title"><i class="fas fa-list-ol"></i> Live Queue</div><div class="sec-head-meta" style="color:var(--green);">● Online</div></div>
                <div class="queue-row">
                    <div class="queue-pos" style="color:var(--green);font-size:12px;"><i class="fas fa-spinner fa-spin"></i></div>
                    <div class="queue-app"><div class="queue-app-name">Snapchat++</div><div class="queue-app-user">Signing · 18s elapsed</div></div>
                    <div class="queue-status"><div class="dot dot-signing"></div><span style="color:var(--cyan);">ACTIVE</span></div>
                </div>
                <div class="queue-row" style="background:rgba(255,136,0,0.03);border-left:2px solid var(--orange);">
                    <div class="queue-pos" style="color:var(--orange);">2</div>
                    <div class="queue-app"><div class="queue-app-name" style="color:var(--orange);">Your App <span style="font-size:10px;font-weight:400;">(You)</span></div><div class="queue-app-user">Est. ~35s</div></div>
                    <div class="queue-status"><div class="dot dot-queued"></div>QUEUED</div>
                </div>
                <div class="queue-row" style="border-bottom:none;">
                    <div class="queue-pos">3</div>
                    <div class="queue-app"><div class="queue-app-name">TikTok++</div><div class="queue-app-user">Est. ~1m 10s</div></div>
                    <div class="queue-status"><div class="dot dot-queued"></div>QUEUED</div>
                </div>
            </div>

            <!-- Tips -->
            <div class="sec-card">
                <div class="sec-head"><div class="sec-head-title"><i class="fas fa-lightbulb"></i> Tips</div></div>
                <div style="padding:14px;display:flex;flex-direction:column;gap:10px;font-size:12px;color:var(--dim);">
                    <div style="display:flex;gap:8px;"><i class="fas fa-info-circle" style="color:var(--cyan);flex-shrink:0;margin-top:1px;"></i><span><strong style="color:var(--white);">OTA vs TrollStore:</strong> TrollStore installs are permanent. OTA may be revoked if Apple patches the signing method.</span></div>
                    <div style="display:flex;gap:8px;"><i class="fas fa-info-circle" style="color:var(--cyan);flex-shrink:0;margin-top:1px;"></i><span><strong style="color:var(--white);">Bundle ID Override:</strong> Lets you run the tweaked version alongside the original App Store version.</span></div>
                    <div style="display:flex;gap:8px;"><i class="fas fa-info-circle" style="color:var(--cyan);flex-shrink:0;margin-top:1px;"></i><span><strong style="color:var(--white);">iOS 17.5 users:</strong> Enable "Strip Entitlements" to avoid crashes on the current beta.</span></div>
                </div>
            </div>

            <!-- Supported iOS -->
            <div class="sec-card">
                <div class="sec-head"><div class="sec-head-title"><i class="fab fa-apple"></i> iOS Support</div></div>
                <div style="padding:12px 14px;display:flex;flex-direction:column;gap:6px;">
                    <div style="display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-bottom:1px solid var(--border2);"><span style="color:var(--grey);">iOS 17.0 – 17.4</span><span style="color:var(--green);">✓ Full</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-bottom:1px solid var(--border2);"><span style="color:var(--grey);">iOS 17.5 beta</span><span style="color:var(--yellow);">⚠ Partial</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-bottom:1px solid var(--border2);"><span style="color:var(--grey);">iOS 16.0 – 16.7</span><span style="color:var(--green);">✓ Full</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-bottom:1px solid var(--border2);"><span style="color:var(--grey);">iOS 15.0 – 15.8</span><span style="color:var(--green);">✓ Full</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:12px;padding:5px 0;"><span style="color:var(--grey);">iOS 14.0 – 14.8</span><span style="color:var(--green);">✓ Full</span></div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* ── Library rows ── */
.lib-row {
    display:grid; grid-template-columns:44px 1fr 100px 80px 1fr;
    align-items:center; gap:12px; padding:11px 16px;
    border-bottom:1px solid var(--border2); transition:background 0.15s;
}
.lib-row:hover { background:rgba(255,255,255,0.015); }
.lib-icon { width:40px; height:40px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.lib-info { min-width:0; }
.lib-name { font-size:13px; font-weight:700; color:#fff; }
.lib-meta { font-size:10px; color:var(--dim); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lib-status { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; font-family:'Oswald',sans-serif; letter-spacing:0.5px; }
.active-status  { color:var(--green); }
.expired-status { color:var(--yellow); }
.lib-ios { font-size:11px; color:var(--dim); }
.lib-actions { display:flex; gap:6px; justify-content:flex-end; }
.lib-btn {
    padding:4px 10px; background:transparent; border:1px solid var(--border);
    color:var(--grey); font-family:'Oswald',sans-serif; font-size:11px;
    font-weight:600; letter-spacing:0.3px; cursor:pointer; transition:all 0.15s;
    display:flex; align-items:center; gap:4px; white-space:nowrap;
}
.lib-btn.install { border-color:rgba(0,204,255,0.3); color:var(--cyan); }
.lib-btn.install:hover { background:rgba(0,204,255,0.1); }
.lib-btn.resign  { border-color:var(--border); }
.lib-btn.resign:hover { border-color:var(--orange); color:var(--orange); }
.lib-btn.del     { border-color:var(--border); color:var(--dim); padding:4px 8px; }
.lib-btn.del:hover { border-color:rgba(204,0,0,0.5); color:#ff4444; }

/* ── Sign App ── */
.sign-tab {
    flex:1; padding:10px 18px; text-align:center;
    font-family:'Oswald',sans-serif; font-size:13px; font-weight:600;
    letter-spacing:0.5px; text-transform:uppercase; color:var(--dim);
    cursor:pointer; border-bottom:2px solid transparent; transition:all 0.15s;
    display:flex; align-items:center; justify-content:center; gap:7px;
}
.sign-tab:hover { color:var(--grey); }
.sign-tab.active { color:var(--orange); border-bottom-color:var(--orange); }

.sign-app-card {
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    border:1px solid var(--border); background:var(--card2);
    cursor:pointer; transition:all 0.15s; position:relative;
}
.sign-app-card:hover { border-color:var(--orange); background:rgba(255,136,0,0.04); }
.sign-app-card.selected { border-color:var(--orange); background:rgba(255,136,0,0.06); }
.sac-icon { width:40px; height:40px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.sac-info { flex:1; min-width:0; }
.sac-name { font-size:12px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sac-ver  { font-size:10px; color:var(--dim); margin-top:2px; }
.sac-check { color:var(--orange); font-size:14px; opacity:0; transition:opacity 0.15s; flex-shrink:0; }
.sign-app-card.selected .sac-check { opacity:1; }

.opt-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 0; border-bottom:1px solid var(--border2); gap:16px;
}
.opt-info { flex:1; min-width:0; }
.opt-label { font-size:13px; font-weight:700; color:#fff; }
.opt-desc  { font-size:11px; color:var(--dim); margin-top:2px; }
.opt-choice {
    padding:5px 14px; border:1px solid var(--border); color:var(--dim);
    font-family:'Oswald',sans-serif; font-size:12px; font-weight:600;
    letter-spacing:0.5px; cursor:pointer; transition:all 0.15s;
}
.opt-choice:hover { border-color:var(--grey); color:var(--grey); }
.opt-choice.selected { border-color:var(--orange); color:var(--orange); background:rgba(255,136,0,0.08); }

.opt-toggle {
    width:44px; height:24px; border-radius:12px; background:var(--border);
    position:relative; cursor:pointer; transition:background 0.2s; flex-shrink:0;
}
.opt-toggle.on { background:var(--orange); }
.opt-toggle-knob {
    width:18px; height:18px; border-radius:50%; background:#fff;
    position:absolute; top:3px; left:3px; transition:left 0.2s;
}
.opt-toggle.on .opt-toggle-knob { left:23px; }
</style>

<script>

function toggleMobSearch(btn) {
  var bar = document.getElementById('zs-mob-search-bar');
  if (!bar) return;
  var isOpen = bar.classList.toggle('open');
  btn.innerHTML = isOpen ? '<i class="fas fa-times"></i>' : '<i class="fas fa-search"></i>';
  if (isOpen) {
    var inp = document.getElementById('zs-mob-search-input');
    if (inp) inp.focus();
  }
}

function toggleMobileMenu(btn) {
  // placeholder — hamburger for future off-canvas menu
}

function show(page, el) {
    document.querySelectorAll('.page-wrap').forEach(p => p.style.display = 'none');
    var forumShell = document.getElementById('pg-forum-shell');
    if (forumShell) forumShell.style.display = 'none';

    if (page === 'forum') {
        if (forumShell) forumShell.style.display = 'block';
        showView('v-category');
    } else {
        var map = {
            portal:  'pg-portal',
            credits: 'pg-credits',
            upgrade: 'pg-upgrade',
            regs:    'pg-regs',
            faq:     'pg-faq'
        };
        var target = document.getElementById(map[page]);
        if (target) target.style.display = 'flex';
    }
    document.querySelectorAll('.zs-topnav-links a').forEach(a => a.classList.remove('active'));
    if (el) el.classList.add('active');
    window.scrollTo(0, 0);
}


function showView(id) {
  // Make sure forum shell is visible
  var forumShell = document.getElementById('pg-forum-shell');
  if (forumShell) forumShell.style.display = 'block';
  // Hide all page-wraps
  document.querySelectorAll('.page-wrap').forEach(p => p.style.display = 'none');
  document.querySelectorAll('.forum-view').forEach(v => v.classList.remove('active'));
  var t = document.getElementById(id);
  if (t) t.classList.add('active');
  if (id === 'v-dylib1') initDylibView('d1');
  if (id === 'v-dylib2') initDylibView('d2');
  window.scrollTo(0,0);
}

function setProfTab(el, tabId) {
  ['pt-posts','pt-ipas','pt-activity','pt-friends','pt-stats'].forEach(function(t){
    var e = document.getElementById(t); if(e) e.style.display='none';
  });
  var t = document.getElementById(tabId); if(t) t.style.display='block';
  el.parentElement.querySelectorAll('.prof-tab').forEach(function(t){t.classList.remove('active');});
  el.classList.add('active');
}

const DYLIB_PAGES = {
  "d1-overview": `<div class="dylib-layout">
  <div>
    <div class="sec-card">
      <div class="sec-head" style="border-left-color:var(--purple);">
        <div class="sec-head-title" style="color:var(--purple);"><i class="fas fa-user-circle"></i> Posted by ZEFv</div>
        <div class="sec-head-meta">Feb 17, 2026 &middot; 12:04 AM &middot; <a href="#" onclick="showView('v-profile')" style="color:var(--cyan);">View Profile</a></div>
      </div>
      <div style="display:grid;grid-template-columns:160px 1fr;">
        <div style="background:linear-gradient(180deg,#13131a,#0e0e12);border-right:1px solid var(--border2);padding:14px 10px;display:flex;flex-direction:column;align-items:center;text-align:center;">
              <div style="position:relative;margin-bottom:8px;">
                <div style="width:54px;height:54px;border-radius:50%;border:3px solid var(--cyan);background:#0a0a0a;display:flex;align-items:center;justify-content:center;font-family:'Oswald',sans-serif;font-size:17px;font-weight:700;color:var(--cyan);">ZE</div>
                <div style="position:absolute;bottom:1px;right:1px;width:9px;height:9px;border-radius:50%;background:var(--green);border:2px solid var(--card2);"></div>
              </div>
              <div style="font-family:'Oswald',sans-serif;font-size:12px;font-weight:700;color:var(--cyan);margin-bottom:2px;">ZEFv</div>
              <div style="font-size:8px;font-weight:700;padding:2px 7px;border-radius:2px;background:rgba(0,204,255,0.12);color:var(--cyan);border:1px solid rgba(0,204,255,0.25);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;">Developer</div>
              <div style="width:100%;display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-bottom:7px;">
                <div style="background:rgba(255,255,255,0.03);border:1px solid var(--border2);padding:3px;text-align:center;"><div style="font-family:'Oswald',sans-serif;font-size:11px;color:var(--cyan);">8,204</div><div style="font-size:7px;color:var(--dim);text-transform:uppercase;">Posts</div></div>
                <div style="background:rgba(255,255,255,0.03);border:1px solid var(--border2);padding:3px;text-align:center;"><div style="font-family:'Oswald',sans-serif;font-size:11px;color:var(--green);">+1.2k</div><div style="font-size:7px;color:var(--dim);text-transform:uppercase;">Rep</div></div>
                <div style="background:rgba(255,255,255,0.03);border:1px solid var(--border2);padding:3px;text-align:center;"><div style="font-family:'Oswald',sans-serif;font-size:11px;color:var(--purple);">89</div><div style="font-size:7px;color:var(--dim);text-transform:uppercase;">Dylibs</div></div>
                <div style="background:rgba(255,255,255,0.03);border:1px solid var(--border2);padding:3px;text-align:center;"><div style="font-family:'Oswald',sans-serif;font-size:11px;color:var(--orange);">4y</div><div style="font-size:7px;color:var(--dim);text-transform:uppercase;">Member</div></div>
              </div>
              <div class="pc-actions" style="width:100%;">
                <button class="pc-act-btn pm" onclick="openPMModal(currentModalUser.username,currentModalUser.initials,'',currentModalUser.hex)"><i class="fas fa-envelope"></i> Send PM</button>
                <div class="pc-act-btn-row">
                  <button class="pc-act-btn" onclick="openFriendModal(currentModalUser.username,currentModalUser.initials,'#00d4ff')"><i class="fas fa-user-plus"></i> Add</button>
                  <button class="pc-act-btn" style="border-color:rgba(0,204,85,0.3);color:var(--green);" onclick="openRepModal(currentModalUser.username,currentModalUser.initials,'#00e87a','+841')"><i class="fas fa-thumbs-up"></i> +Rep</button>
                </div>
              </div>
            </div>
        <div class="post-content" style="padding:16px 18px;">
          <p>RecallUnlock v2.1 is the cleanest build I&apos;ve shipped. Patches the subscription gate and all AI processing caps at the binary level &mdash; no server calls spoofed, no cert pinning bypass needed.</p>
          <p><strong>What it hooks:</strong> The paywall check at <code>0x1004A2C18</code> &mdash; a simple boolean return. The processing limiter in <code>AIProcessingManager</code> method <code>canProcessRequest:</code>, patched to always return YES.</p>
          <div class="info-box"><i class="fas fa-info-circle" style="color:var(--cyan);margin-right:6px;"></i><strong>ARM64 only.</strong> Confirmed iOS 14.0 through iOS 17.4.</div>
        </div>
      </div>
      <div class="post-actions">
        <span class="post-action-btn liked"><i class="fas fa-thumbs-up"></i> 74</span>
        <span class="post-action-btn"><i class="fas fa-thumbs-down"></i></span>
        <span class="post-action-btn" onclick="switchDylibTab('d1','replies',document.querySelector('#d1-tabbar .dylib-tab:last-child'))"><i class="fas fa-comments"></i> 22 Replies</span>
      </div>
    </div>
  </div>
  <div style="display:flex;flex-direction:column;gap:14px;">
    <div class="sec-card">
      <div class="sec-head orange"><div class="sec-head-title"><i class="fas fa-syringe"></i> Quick Inject</div></div>
      <div style="padding:12px;display:flex;flex-direction:column;gap:8px;">
        <div style="font-size:11px;color:var(--dim);display:flex;flex-direction:column;gap:4px;">
          <div style="display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid var(--border2);"><span>Bundle</span><span style="color:var(--cyan);font-family:'Courier New',monospace;font-size:10px;">ai.recall.app</span></div>
          <div style="display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid var(--border2);"><span>Size</span><span style="color:#fff;">148 KB</span></div>
          <div style="display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid var(--border2);"><span>Arch</span><span style="color:#fff;">ARM64</span></div>
          <div style="display:flex;justify-content:space-between;padding:3px 0;"><span>Substrate</span><span style="color:var(--green);">Not Required</span></div>
        </div>
        <button onclick="showPage('pg-sign')" style="width:100%;background:var(--orange);border:none;color:#000;padding:9px;font-family:'Oswald',sans-serif;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;"><i class="fas fa-syringe"></i> INJECT &amp; SIGN</button>
      </div>
    </div>
    <div class="sec-card">
      <div class="sec-head" style="border-left-color:var(--purple);"><div class="sec-head-title"><i class="fas fa-list" style="color:var(--purple);"></i> More Dylibs</div></div>
      <div onclick="showView('v-dylib2')" style="cursor:pointer;padding:10px 12px;transition:background 0.15s;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--border2);" onmouseover="this.style.background='rgba(160,102,255,0.05)'" onmouseout="this.style.background='transparent'">
        <div style="width:24px;height:24px;border-radius:4px;background:rgba(255,136,0,0.1);border:1px solid rgba(255,136,0,0.2);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--orange);flex-shrink:0;"><i class="fas fa-ban"></i></div>
        <div><div style="font-size:11px;font-weight:700;color:#fff;">NoSub.dylib</div><div style="font-size:9px;color:var(--dim);">v1.3 &middot; 8.7k injects</div></div>
      </div>
    </div>
  </div>
</div>`,
  "d1-hooks": `<div class="sec-card">
  <div class="sec-head" style="border-left-color:var(--purple);"><div class="sec-head-title"><i class="fas fa-crosshairs" style="color:var(--purple);"></i> Hook Map &mdash; 3 patches &middot; ARM64</div></div>
  <div style="display:grid;grid-template-columns:150px 1fr 90px 80px;padding:6px 14px;background:var(--card2);border-bottom:1px solid var(--border2);font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;font-family:'Oswald',sans-serif;">
    <span>Offset</span><span>Method</span><span>Type</span><span>Status</span>
  </div>
  <div class="hook-row"><span class="hook-addr">0x1004A2C18</span><span class="hook-sym">-[SubscriptionManager isSubscribed]</span><span class="hook-type type-ret">RET</span><span class="hook-ok"><i class="fas fa-check-circle"></i> Active</span></div>
  <div class="hook-row"><span class="hook-addr">0x100512F44</span><span class="hook-sym">-[AIProcessingManager canProcessRequest:]</span><span class="hook-type type-hook">MSHook</span><span class="hook-ok"><i class="fas fa-check-circle"></i> Active</span></div>
  <div class="hook-row"><span class="hook-addr">0x100489B80</span><span class="hook-sym">-[HistoryStore maxEntries]</span><span class="hook-type type-ret">RET</span><span class="hook-ok"><i class="fas fa-check-circle"></i> Active</span></div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:12px;">
  <div class="sec-card" style="padding:16px;text-align:center;"><div style="font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;">Patches</div><div style="font-family:'Oswald',sans-serif;font-size:36px;font-weight:700;color:var(--purple);">3</div></div>
  <div class="sec-card" style="padding:16px;text-align:center;"><div style="font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;">Arch</div><div style="font-family:'Oswald',sans-serif;font-size:36px;font-weight:700;color:var(--cyan);">ARM64</div></div>
  <div class="sec-card" style="padding:16px;text-align:center;"><div style="font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;">ASLR Safe</div><div style="font-family:'Oswald',sans-serif;font-size:36px;font-weight:700;color:var(--green);">YES</div></div>
</div>`,
  "d1-code": `<div class="sec-card">
  <div class="sec-head" style="border-left-color:var(--purple);">
    <div class="sec-head-title"><i class="fas fa-terminal" style="color:var(--purple);"></i> Patch Logic (Logos)</div>
    <div class="sec-head-meta"><button onclick="navigator.clipboard&&navigator.clipboard.writeText(document.getElementById('d1cp').innerText)" style="background:transparent;border:1px solid var(--border);color:var(--dim);padding:2px 9px;font-family:'Oswald',sans-serif;font-size:9px;cursor:pointer;" onmouseover="this.style.color='var(--purple)';this.style.borderColor='var(--purple)'" onmouseout="this.style.color='var(--dim)';this.style.borderColor='var(--border)'"><i class="fas fa-copy"></i> COPY</button></div>
  </div>
  <pre class="dylib-code" id="d1cp"><span class="dc-comment">// RecallUnlock.dylib v2.1 &mdash; ZEFv</span>
<span class="dc-kw">#include</span> <span class="dc-str">&lt;substrate.h&gt;</span>

<span class="dc-comment">// Patch 1: Strip subscription gate</span>
<span class="dc-kw">%hook</span> SubscriptionManager
- (<span class="dc-type">BOOL</span>)isSubscribed { <span class="dc-kw">return</span> <span class="dc-val">YES</span>; }
<span class="dc-kw">%end</span>

<span class="dc-comment">// Patch 2: Remove AI processing cap</span>
<span class="dc-kw">%hook</span> AIProcessingManager
- (<span class="dc-type">BOOL</span>)canProcessRequest:(<span class="dc-type">id</span>)req { <span class="dc-kw">return</span> <span class="dc-val">YES</span>; }
<span class="dc-kw">%end</span>

<span class="dc-comment">// Patch 3: Unlimited history</span>
<span class="dc-kw">%hook</span> HistoryStore
- (<span class="dc-type">NSInteger</span>)maxEntries { <span class="dc-kw">return</span> <span class="dc-val">NSIntegerMax</span>; }
<span class="dc-kw">%end</span></pre>
</div>`,
  "d1-compat": `<div class="sec-card">
  <div class="sec-head" style="border-left-color:var(--purple);"><div class="sec-head-title"><i class="fab fa-apple" style="color:var(--purple);"></i> Compatibility Matrix</div></div>
  <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border2);">
    <div class="compat-cell head">iOS</div><div class="compat-cell head">OTA</div><div class="compat-cell head">TrollStore</div><div class="compat-cell head">Jailbreak</div><div class="compat-cell head">By</div>
    <div class="compat-cell">14.0&ndash;14.8</div><div class="compat-cell ok"><i class="fas fa-check"></i></div><div class="compat-cell ok"><i class="fas fa-check"></i></div><div class="compat-cell ok"><i class="fas fa-check"></i></div><div class="compat-cell" style="font-size:10px;color:var(--cyan);">ZEFv</div>
    <div class="compat-cell">15.0&ndash;15.8</div><div class="compat-cell ok"><i class="fas fa-check"></i></div><div class="compat-cell ok"><i class="fas fa-check"></i></div><div class="compat-cell ok"><i class="fas fa-check"></i></div><div class="compat-cell" style="font-size:10px;color:var(--yellow);">iOS_Dev</div>
    <div class="compat-cell">16.0&ndash;16.7</div><div class="compat-cell ok"><i class="fas fa-check"></i></div><div class="compat-cell ok"><i class="fas fa-check"></i></div><div class="compat-cell ok"><i class="fas fa-check"></i></div><div class="compat-cell" style="font-size:10px;color:var(--green);">sipx</div>
    <div class="compat-cell">17.0&ndash;17.4</div><div class="compat-cell ok"><i class="fas fa-check"></i></div><div class="compat-cell ok"><i class="fas fa-check"></i></div><div class="compat-cell warn"><i class="fas fa-exclamation-triangle"></i></div><div class="compat-cell" style="font-size:10px;color:var(--cyan);">ZEFv</div>
    <div class="compat-cell">17.5 beta</div><div class="compat-cell warn"><i class="fas fa-exclamation-triangle"></i></div><div class="compat-cell warn"><i class="fas fa-exclamation-triangle"></i></div><div class="compat-cell fail"><i class="fas fa-times"></i></div><div class="compat-cell" style="font-size:10px;color:var(--dim);">TBD</div>
  </div>
</div>`,
  "d1-stats": `<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;">
  <div class="sec-card" style="padding:20px;text-align:center;border-left:3px solid var(--purple);"><div style="font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;">Total Injects</div><div style="font-family:'Oswald',sans-serif;font-size:44px;font-weight:700;color:var(--purple);">3,241</div></div>
  <div class="sec-card" style="padding:20px;text-align:center;border-left:3px solid var(--green);"><div style="font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;">Success Rate</div><div style="font-family:'Oswald',sans-serif;font-size:44px;font-weight:700;color:var(--green);">98.7%</div></div>
</div>
<div class="sec-card"><div class="sec-head" style="border-left-color:var(--purple);"><div class="sec-head-title"><i class="fas fa-chart-bar" style="color:var(--purple);"></i> By iOS Version</div></div>
<div style="padding:14px;display:flex;flex-direction:column;gap:10px;">
  <div><div style="display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px;"><span style="color:var(--dim);">iOS 17.x</span><span style="color:var(--cyan);font-family:'Oswald',sans-serif;">2,100</span></div><div style="height:5px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:65%;background:linear-gradient(90deg,var(--purple),var(--cyan));border-radius:2px;"></div></div></div>
  <div><div style="display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px;"><span style="color:var(--dim);">iOS 16.x</span><span style="color:var(--purple);font-family:'Oswald',sans-serif;">841</span></div><div style="height:5px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:26%;background:var(--purple);border-radius:2px;"></div></div></div>
  <div><div style="display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px;"><span style="color:var(--dim);">iOS 15.x</span><span style="color:var(--dim);font-family:'Oswald',sans-serif;">224</span></div><div style="height:5px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:7%;background:var(--dim);border-radius:2px;"></div></div></div>
</div></div>`,
  "d1-replies": `<div class="sec-card">
  <div class="sec-head" style="border-left-color:var(--purple);"><div class="sec-head-title"><i class="fas fa-comments" style="color:var(--purple);"></i> Replies <span style="color:var(--dim);font-weight:400;font-size:11px;">&mdash; 22 total</span></div></div>
  <div class="comment-row">
    <div class="cm-av" style="border-color:var(--yellow);color:var(--yellow);">iD</div>
    <div class="cm-body"><div class="cm-header"><span class="cm-name" style="color:var(--yellow);">iOS_Dev</span><span class="cm-role encoder">Encoder</span><span class="cm-time">Today &middot; 1:04 AM</span></div><div class="cm-text">All 3 hooks landing clean &mdash; no ASLR issues. NSIntegerMax for maxEntries might cause memory pressure on older devices.</div><div class="cm-actions"><span><i class="fas fa-thumbs-up"></i> 18</span><span><i class="fas fa-reply"></i> Reply</span></div></div>
  </div>
  <div class="comment-row">
    <div class="cm-av" style="border-color:var(--pink);color:var(--pink);">xX</div>
    <div class="cm-body"><div class="cm-header"><span class="cm-name" style="color:var(--pink);">xXDarkXx</span><span class="cm-role vip">VIP</span><span class="cm-time">Today &middot; 2:30 AM</span></div><div class="cm-text">Works perfectly on iPhone 14 Pro iOS 17.2 OTA. Unlimited mode confirmed.</div><div class="cm-actions"><span><i class="fas fa-thumbs-up"></i> 9</span><span><i class="fas fa-reply"></i> Reply</span></div></div>
  </div>
  <div class="comment-row" style="border-bottom:none;">
    <div class="cm-av">n3</div>
    <div class="cm-body"><div class="cm-header"><span class="cm-name">n3wbie_42</span><span class="cm-time">Today &middot; 3:11 AM</span></div><div class="cm-text">How do I inject this? Upload alongside the IPA on the sign page?</div><div class="cm-actions"><span><i class="fas fa-thumbs-up"></i> 0</span><span><i class="fas fa-reply"></i> Reply</span></div></div>
  </div>
  <div style="padding:12px 14px;border-top:1px solid var(--border2);display:flex;gap:10px;align-items:flex-start;">
          <div style="width:30px;height:30px;border-radius:50%;background:var(--card2);border:2px solid var(--purple);display:flex;align-items:center;justify-content:center;font-family:'Oswald',sans-serif;font-size:11px;font-weight:700;color:var(--purple);flex-shrink:0;">AD</div>
          <div style="flex:1;display:flex;flex-direction:column;gap:7px;">
            <textarea placeholder="Write a reply..." style="background:#060608;border:1px solid var(--border);color:#fff;padding:9px 12px;font-size:12px;font-family:'Rajdhani',sans-serif;outline:none;width:100%;resize:vertical;min-height:55px;box-sizing:border-box;"></textarea>
            <div style="display:flex;justify-content:flex-end;"><button style="background:var(--purple);border:none;color:#000;padding:6px 20px;font-family:'Oswald',sans-serif;font-size:12px;font-weight:700;cursor:pointer;">POST</button></div>
          </div>
        </div>
</div>`,
  "d2-overview": `<div class="dylib-layout">
  <div>
    <div class="sec-card">
      <div class="sec-head" style="border-left-color:var(--orange);">
        <div class="sec-head-title" style="color:var(--orange);"><i class="fas fa-user-circle"></i> Posted by iOS_Dev</div>
        <div class="sec-head-meta">Feb 14, 2026 &middot; 8:21 PM &middot; <a href="#" onclick="showView('v-profile')" style="color:var(--cyan);">View Profile</a></div>
      </div>
      <div style="display:grid;grid-template-columns:160px 1fr;">
        <div style="background:linear-gradient(180deg,#13131a,#0e0e12);border-right:1px solid var(--border2);padding:14px 10px;display:flex;flex-direction:column;align-items:center;text-align:center;">
              <div style="position:relative;margin-bottom:8px;">
                <div style="width:54px;height:54px;border-radius:50%;border:3px solid var(--yellow);background:#0a0a0a;display:flex;align-items:center;justify-content:center;font-family:'Oswald',sans-serif;font-size:17px;font-weight:700;color:var(--yellow);">iD</div>
                <div style="position:absolute;bottom:1px;right:1px;width:9px;height:9px;border-radius:50%;background:var(--green);border:2px solid var(--card2);"></div>
              </div>
              <div style="font-family:'Oswald',sans-serif;font-size:12px;font-weight:700;color:var(--yellow);margin-bottom:2px;">iOS_Dev</div>
              <div style="font-size:8px;font-weight:700;padding:2px 7px;border-radius:2px;background:rgba(255,204,0,0.12);color:var(--yellow);border:1px solid rgba(255,204,0,0.25);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;">Encoder</div>
              <div style="width:100%;display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-bottom:7px;">
                <div style="background:rgba(255,255,255,0.03);border:1px solid var(--border2);padding:3px;text-align:center;"><div style="font-family:'Oswald',sans-serif;font-size:11px;color:var(--cyan);">6,119</div><div style="font-size:7px;color:var(--dim);text-transform:uppercase;">Posts</div></div>
                <div style="background:rgba(255,255,255,0.03);border:1px solid var(--border2);padding:3px;text-align:center;"><div style="font-family:'Oswald',sans-serif;font-size:11px;color:var(--green);">+841</div><div style="font-size:7px;color:var(--dim);text-transform:uppercase;">Rep</div></div>
                <div style="background:rgba(255,255,255,0.03);border:1px solid var(--border2);padding:3px;text-align:center;"><div style="font-family:'Oswald',sans-serif;font-size:11px;color:var(--yellow);">214</div><div style="font-size:7px;color:var(--dim);text-transform:uppercase;">IPAs</div></div>
                <div style="background:rgba(255,255,255,0.03);border:1px solid var(--border2);padding:3px;text-align:center;"><div style="font-family:'Oswald',sans-serif;font-size:11px;color:var(--orange);">3y</div><div style="font-size:7px;color:var(--dim);text-transform:uppercase;">Member</div></div>
              </div>
              <div class="pc-actions" style="width:100%;">
                <button class="pc-act-btn pm" onclick="openPMModal(currentModalUser.username,currentModalUser.initials,'',currentModalUser.hex)"><i class="fas fa-envelope"></i> Send PM</button>
                <div class="pc-act-btn-row">
                  <button class="pc-act-btn" onclick="openFriendModal(currentModalUser.username,currentModalUser.initials,'#00d4ff')"><i class="fas fa-user-plus"></i> Add</button>
                  <button class="pc-act-btn" style="border-color:rgba(0,204,85,0.3);color:var(--green);" onclick="openRepModal(currentModalUser.username,currentModalUser.initials,'#00e87a','+841')"><i class="fas fa-thumbs-up"></i> +Rep</button>
                </div>
              </div>
            </div>
        <div class="post-content" style="padding:16px 18px;">
          <p><strong>NoSub.dylib v1.3</strong> is a universal subscription bypass &mdash; works across multiple apps sharing the same StoreKit receipt validation pattern. Single dylib, multiple targets.</p>
          <p>We intercept the validation delegate and return a forged &ldquo;valid&rdquo; response before it hits the network.</p>
          <div class="warn-box"><strong style="color:var(--orange);">v1.3:</strong> Dropped receipt-forge for a cleaner hook on <code>SKPaymentQueue</code> observer. Much more stable on iOS 17.</div>
        </div>
      </div>
      <div class="post-actions">
        <span class="post-action-btn liked"><i class="fas fa-thumbs-up"></i> 112</span>
        <span class="post-action-btn"><i class="fas fa-thumbs-down"></i></span>
        <span class="post-action-btn" onclick="switchDylibTab('d2','replies',document.querySelector('#d2-tabbar .dylib-tab:last-child'))"><i class="fas fa-comments"></i> 38 Replies</span>
      </div>
    </div>
  </div>
  <div style="display:flex;flex-direction:column;gap:14px;">
    <div class="sec-card">
      <div class="sec-head orange"><div class="sec-head-title"><i class="fas fa-syringe"></i> Quick Inject</div></div>
      <div style="padding:12px;display:flex;flex-direction:column;gap:8px;">
        <div style="font-size:11px;color:var(--dim);display:flex;flex-direction:column;gap:4px;">
          <div style="display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid var(--border2);"><span>Bundle</span><span style="color:var(--orange);font-family:'Courier New',monospace;font-size:10px;">Universal</span></div>
          <div style="display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid var(--border2);"><span>Size</span><span style="color:#fff;">92 KB</span></div>
          <div style="display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid var(--border2);"><span>Arch</span><span style="color:#fff;">ARM64</span></div>
          <div style="display:flex;justify-content:space-between;padding:3px 0;"><span>Substrate</span><span style="color:var(--green);">Not Required</span></div>
        </div>
        <button onclick="showPage('pg-sign')" style="width:100%;background:var(--orange);border:none;color:#000;padding:9px;font-family:'Oswald',sans-serif;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;"><i class="fas fa-syringe"></i> INJECT &amp; SIGN</button>
      </div>
    </div>
    <div class="sec-card">
      <div class="sec-head" style="border-left-color:var(--orange);"><div class="sec-head-title"><i class="fas fa-list" style="color:var(--orange);"></i> More Dylibs</div></div>
      <div onclick="showView('v-dylib1')" style="cursor:pointer;padding:10px 12px;transition:background 0.15s;display:flex;align-items:center;gap:9px;" onmouseover="this.style.background='rgba(160,102,255,0.05)'" onmouseout="this.style.background='transparent'">
        <div style="width:24px;height:24px;border-radius:4px;background:rgba(160,102,255,0.1);border:1px solid rgba(160,102,255,0.2);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--purple);flex-shrink:0;"><i class="fas fa-unlock-alt"></i></div>
        <div><div style="font-size:11px;font-weight:700;color:#fff;">RecallUnlock.dylib</div><div style="font-size:9px;color:var(--dim);">v2.1 &middot; 3.2k injects</div></div>
      </div>
    </div>
  </div>
</div>`,
  "d2-apps": `<div class="sec-card">
  <div class="sec-head" style="border-left-color:var(--orange);"><div class="sec-head-title"><i class="fas fa-th" style="color:var(--orange);"></i> Supported Apps &mdash; 11 confirmed</div></div>
  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1px;background:var(--border2);">
    <div class="nosub-app-tile"><div style="width:40px;height:40px;border-radius:10px;background:#191414;display:flex;align-items:center;justify-content:center;font-size:22px;">🎵</div><span>Spotify</span><span class="nosub-ok"><i class="fas fa-check"></i> v8.9.12</span></div>
    <div class="nosub-app-tile"><div style="width:40px;height:40px;border-radius:10px;background:#ff0000;display:flex;align-items:center;justify-content:center;font-size:22px;">▶</div><span>YouTube</span><span class="nosub-ok"><i class="fas fa-check"></i> v19.8.1</span></div>
    <div class="nosub-app-tile"><div style="width:40px;height:40px;border-radius:10px;background:#5865F2;display:flex;align-items:center;justify-content:center;font-size:22px;">💬</div><span>Discord</span><span class="nosub-ok"><i class="fas fa-check"></i> v222.0</span></div>
    <div class="nosub-app-tile"><div style="width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#f09433,#dc2743,#bc1888);display:flex;align-items:center;justify-content:center;font-size:22px;">📷</div><span>Instagram</span><span class="nosub-ok"><i class="fas fa-check"></i> v263.0</span></div>
    <div class="nosub-app-tile"><div style="width:40px;height:40px;border-radius:10px;background:#010101;display:flex;align-items:center;justify-content:center;font-size:22px;">🎵</div><span>TikTok</span><span class="nosub-ok"><i class="fas fa-check"></i> v33.2.0</span></div>
    <div class="nosub-app-tile" style="opacity:0.5;"><div style="width:40px;height:40px;border-radius:10px;background:#1a1a2e;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--dim);">?</div><span style="color:var(--dim);">+6 more</span><span style="font-size:9px;color:var(--dim);">Untested</span></div>
  </div>
</div>`,
  "d2-hooks": `<div class="sec-card">
  <div class="sec-head" style="border-left-color:var(--orange);"><div class="sec-head-title"><i class="fas fa-crosshairs" style="color:var(--orange);"></i> Hook Map &mdash; 2 patches &middot; Universal</div></div>
  <div style="display:grid;grid-template-columns:150px 1fr 90px 80px;padding:6px 14px;background:var(--card2);border-bottom:1px solid var(--border2);font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;font-family:'Oswald',sans-serif;">
    <span>Target</span><span>Method</span><span>Type</span><span>Status</span>
  </div>
  <div class="hook-row"><span class="hook-addr" style="color:var(--orange);">SKPaymentQueue</span><span class="hook-sym">-[SKPaymentQueue updatedTransactions:]</span><span class="hook-type type-hook">MSHook</span><span class="hook-ok"><i class="fas fa-check-circle"></i> Active</span></div>
  <div class="hook-row"><span class="hook-addr" style="color:var(--orange);">SKReceiptRef.</span><span class="hook-sym">-[SKReceiptRefreshRequest start]</span><span class="hook-type type-ret">RET</span><span class="hook-ok"><i class="fas fa-check-circle"></i> Active</span></div>
</div>`,
  "d2-code": `<div class="sec-card">
  <div class="sec-head" style="border-left-color:var(--orange);">
    <div class="sec-head-title"><i class="fas fa-terminal" style="color:var(--orange);"></i> Patch Logic (Logos)</div>
    <div class="sec-head-meta"><button onclick="navigator.clipboard&&navigator.clipboard.writeText(document.getElementById('d2cp').innerText)" style="background:transparent;border:1px solid var(--border);color:var(--dim);padding:2px 9px;font-family:'Oswald',sans-serif;font-size:9px;cursor:pointer;" onmouseover="this.style.color='var(--orange)';this.style.borderColor='var(--orange)'" onmouseout="this.style.color='var(--dim)';this.style.borderColor='var(--border)'"><i class="fas fa-copy"></i> COPY</button></div>
  </div>
  <pre class="dylib-code" id="d2cp" style="border-left-color:var(--orange);"><span class="dc-comment">// NoSub.dylib v1.3 &mdash; iOS_Dev</span>
<span class="dc-kw">#include</span> <span class="dc-str">&lt;substrate.h&gt;</span>

<span class="dc-comment">// Patch 1: Forge transaction state to purchased</span>
<span class="dc-kw">%hook</span> SKPaymentQueue
- (<span class="dc-type">void</span>)updatedTransactions:(<span class="dc-type">NSArray</span> *)txs {
    <span class="dc-kw">for</span> (SKPaymentTransaction *tx <span class="dc-kw">in</span> txs)
        MSHookIvar&lt;<span class="dc-type">NSInteger</span>&gt;(tx, <span class="dc-str">@"_transactionState"</span>) = SKPaymentTransactionStatePurchased;
    <span class="dc-kw">%orig</span>;
}
<span class="dc-kw">%end</span>

<span class="dc-comment">// Patch 2: Block receipt refresh entirely</span>
<span class="dc-kw">%hook</span> SKReceiptRefreshRequest
- (<span class="dc-type">void</span>)start { }
<span class="dc-kw">%end</span></pre>
</div>`,
  "d2-stats": `<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;">
  <div class="sec-card" style="padding:20px;text-align:center;border-left:3px solid var(--orange);"><div style="font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;">Total Injects</div><div style="font-family:'Oswald',sans-serif;font-size:44px;font-weight:700;color:var(--orange);">8,712</div></div>
  <div class="sec-card" style="padding:20px;text-align:center;border-left:3px solid var(--green);"><div style="font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;">Success Rate</div><div style="font-family:'Oswald',sans-serif;font-size:44px;font-weight:700;color:var(--green);">99.2%</div></div>
</div>
<div class="sec-card"><div class="sec-head" style="border-left-color:var(--orange);"><div class="sec-head-title"><i class="fas fa-chart-bar" style="color:var(--orange);"></i> By App</div></div>
<div style="padding:14px;display:flex;flex-direction:column;gap:10px;">
  <div><div style="display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px;"><span style="color:var(--dim);">Spotify</span><span style="color:var(--orange);font-family:'Oswald',sans-serif;">5,100</span></div><div style="height:5px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:59%;background:linear-gradient(90deg,var(--orange),var(--yellow));border-radius:2px;"></div></div></div>
  <div><div style="display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px;"><span style="color:var(--dim);">YouTube</span><span style="color:var(--yellow);font-family:'Oswald',sans-serif;">2,400</span></div><div style="height:5px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:28%;background:var(--yellow);border-radius:2px;"></div></div></div>
  <div><div style="display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px;"><span style="color:var(--dim);">Others</span><span style="color:var(--dim);font-family:'Oswald',sans-serif;">1,212</span></div><div style="height:5px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:14%;background:var(--dim);border-radius:2px;"></div></div></div>
</div></div>`,
  "d2-replies": `<div class="sec-card">
  <div class="sec-head" style="border-left-color:var(--orange);"><div class="sec-head-title"><i class="fas fa-comments" style="color:var(--orange);"></i> Replies <span style="color:var(--dim);font-weight:400;font-size:11px;">&mdash; 38 total</span></div></div>
  <div class="comment-row">
    <div class="cm-av" style="border-color:var(--cyan);color:var(--cyan);">ZE</div>
    <div class="cm-body"><div class="cm-header"><span class="cm-name" style="color:var(--cyan);">ZEFv</span><span class="cm-role dev">Dev</span><span class="cm-time">Feb 14 &middot; 9:04 PM</span></div><div class="cm-text">The SKPaymentQueue hook is much cleaner than old receipt forgery. Watch out for apps that also verify <code>-[SKPayment requestData]</code> post-transaction.</div><div class="cm-actions"><span><i class="fas fa-thumbs-up"></i> 31</span><span><i class="fas fa-reply"></i> Reply</span></div></div>
  </div>
  <div class="comment-row">
    <div class="cm-av" style="border-color:var(--pink);color:var(--pink);">xX</div>
    <div class="cm-body"><div class="cm-header"><span class="cm-name" style="color:var(--pink);">xXDarkXx</span><span class="cm-role vip">VIP</span><span class="cm-time">Feb 15</span></div><div class="cm-text">Spotify 100% on 17.2, Discord Nitro confirmed on 17.4. Unstoppable.</div><div class="cm-actions"><span><i class="fas fa-thumbs-up"></i> 22</span><span><i class="fas fa-reply"></i> Reply</span></div></div>
  </div>
  <div class="comment-row" style="border-bottom:none;">
    <div class="cm-av">Tr</div>
    <div class="cm-body"><div class="cm-header"><span class="cm-name">Tr0jan</span><span class="cm-time">Feb 16</span></div><div class="cm-text">Does this work with YouTube Music or just regular YouTube?</div><div class="cm-actions"><span><i class="fas fa-thumbs-up"></i> 3</span><span><i class="fas fa-reply"></i> Reply</span></div></div>
  </div>
  <div style="padding:12px 14px;border-top:1px solid var(--border2);display:flex;gap:10px;align-items:flex-start;">
          <div style="width:30px;height:30px;border-radius:50%;background:var(--card2);border:2px solid var(--orange);display:flex;align-items:center;justify-content:center;font-family:'Oswald',sans-serif;font-size:11px;font-weight:700;color:var(--orange);flex-shrink:0;">AD</div>
          <div style="flex:1;display:flex;flex-direction:column;gap:7px;">
            <textarea placeholder="Write a reply..." style="background:#060608;border:1px solid var(--border);color:#fff;padding:9px 12px;font-size:12px;font-family:'Rajdhani',sans-serif;outline:none;width:100%;resize:vertical;min-height:55px;box-sizing:border-box;"></textarea>
            <div style="display:flex;justify-content:flex-end;"><button style="background:var(--orange);border:none;color:#000;padding:6px 20px;font-family:'Oswald',sans-serif;font-size:12px;font-weight:700;cursor:pointer;">POST</button></div>
          </div>
        </div>
</div>`,
};

function switchDylibTab(prefix, tabId, btn) {
  var el = document.getElementById(prefix + '-content');
  var key = prefix + '-' + tabId;
  if (el && DYLIB_PAGES[key] !== undefined) el.innerHTML = DYLIB_PAGES[key];
  var bar = document.getElementById(prefix + '-tabbar');
  if (bar) bar.querySelectorAll('.dylib-tab').forEach(function(t){ t.classList.remove('active'); });
  if (btn) btn.classList.add('active');
  else if (bar) bar.querySelectorAll('.dylib-tab').forEach(function(t){
    if ((t.getAttribute('onclick')||'').indexOf("'"+tabId+"'") > -1) t.classList.add('active');
  });
  window.scrollTo(0,0);
}
function initDylibView(prefix) {
  if (prefix === 'd1') currentModalUser = { username: 'ZEFv', initials: 'ZE', hex: '#00d4ff' };
  if (prefix === 'd2') currentModalUser = { username: 'iOS_Dev', initials: 'iD', hex: '#ffd000' };
  var bar = document.getElementById(prefix+'-tabbar');
  if (!bar) return;
  var btn = bar.querySelector('.dylib-tab');
  var m = btn ? (btn.getAttribute('onclick')||'').match(/,'([^']+)',this/) : null;
  switchDylibTab(prefix, m ? m[1] : 'overview', btn);
}

function showPage(id) {
    document.querySelectorAll('.page-wrap').forEach(p => p.style.display = 'none');
    var forumShell = document.getElementById('pg-forum-shell');
    if (forumShell) forumShell.style.display = 'none';
    var t = document.getElementById(id);
    if (t) t.style.display = 'flex';
    document.querySelectorAll('.zs-topnav-links a').forEach(a => a.classList.remove('active'));
    window.scrollTo(0, 0);
}

function toggleFaq(el) {
    el.closest('.faq-item').classList.toggle('open');
}

/* ── DELvEK.NET Repo Fetch & Render ── */
var _repoApps = [];
var _currentFilter = 'all';

// Category keyword mapping
var _catMap = {
    tools:     ['tool','clean','scan','compress','convert','editor','text','code','pdf','document','file','terminal','transfer','utility','browser','vpn','wifi','tracker','find','repair','speed'],
    media:     ['music','video','photo','camera','stream','movie','tv','podcast','audio','player','sound','spotify','youtube','tiktok','instagram','netflix','caption','edit','shot','film','record','melodia','suno','djay','edjing','viva','inshot','veed','mojo','picsart'],
    social:    ['social','whatsapp','facebook','twitter','message','chat','discord','snapchat','telegram','truecaller','dating','connect'],
    jailbreak: ['jailbreak','trollstore','exploit','h3lix','serotonin','enswilde','bypass','tweak','cydia','sileo','unc0ver','dopamine'],
    car:       ['car','obd','blitzer','vehicle','drive','carscanner','auto','mechanic'],
    emu:       ['emulator','emu','delta','ppsspp','retroarch','game','gba','nes','snes','dos','play','arcade','tarbaa']
};

function getCategoryForApp(app) {
    var text = (app.name + ' ' + (app.localizedDescription||'') + ' ' + (app.bundleIdentifier||'')).toLowerCase();
    var keys = Object.keys(_catMap);
    for (var k=0; k<keys.length; k++) {
        var cat = keys[k];
        var words = _catMap[cat];
        for (var w=0; w<words.length; w++) {
            if (text.includes(words[w])) return cat;
        }
    }
    return 'tools';
}

function formatSize(bytes) {
    if (!bytes) return '';
    var mb = bytes / 1048576;
    return mb >= 1000 ? (mb/1024).toFixed(1)+' GB' : Math.round(mb)+' MB';
}

function buildAppCard2(app) {
    var div = document.createElement('div');
    div.className = 'app-card2';
    div.dataset.cat = getCategoryForApp(app);
    div.onclick = function(){ showPage('pg-apps'); };
    div.innerHTML =
        '<div class="app-card2-icon" style="background:#111;">' +
            '<img src="'+app.iconURL+'" width="32" height="32" alt="'+app.name+'" onerror="this.style.display=\'none\'">' +
        '</div>' +
        '<div class="app-card2-info">' +
            '<div class="app-card2-name">'+app.name+'</div>' +
            '<div class="app-card2-bundle">'+app.bundleIdentifier+'</div>' +
            '<div class="app-card2-ver">v'+app.version+'</div>' +
        '</div>' +
        '<div class="app-card2-dl"><i class="fas fa-download"></i> '+formatSize(app.size)+'</div>';
    return div;
}

function buildStaffPickCard(app) {
    var div = document.createElement('div');
    div.className = 'staff-pick-card';
    div.onclick = function(){ showPage('pg-apps'); };
    var sizeStr = app.size ? formatSize(app.size) : '';
    var miniosStr = app.minimumOSVersion ? 'iOS '+app.minimumOSVersion+'+' : '';
    var bundleShort = app.bundleIdentifier ? app.bundleIdentifier : '';
    var meta = '';
    if (miniosStr) meta += '<span class="staff-pick-meta-chip"><i class="fab fa-apple"></i> '+miniosStr+'</span>';
    if (sizeStr)   meta += '<span class="staff-pick-meta-chip">'+sizeStr+'</span>';
    if (bundleShort) meta += '<span class="staff-pick-meta-chip" style="font-size:7px;color:var(--dim);">'+bundleShort+'</span>';
    div.innerHTML =
        '<div class="staff-pick-badge">★ STAFF PICK</div>' +
        '<div class="staff-pick-icon"><img src="'+app.iconURL+'" alt="'+app.name+'" onerror="this.style.display=\'none\'"></div>' +
        '<div class="staff-pick-info">' +
            '<div class="staff-pick-name">'+app.name+'</div>' +
            '<div class="staff-pick-dev">by '+app.developerName+'</div>' +
            '<div class="staff-pick-meta">'+
                '<span class="staff-pick-meta-chip" style="color:var(--cyan);">v'+app.version+'</span>' +
                meta +
            '</div>' +
        '</div>';
    return div;
}

function renderPortalApps(apps) {
    // De-duplicate by bundleIdentifier — keep newest version
    var seen = {};
    var unique = [];
    apps.forEach(function(a) {
        if (!seen[a.bundleIdentifier]) { seen[a.bundleIdentifier] = true; unique.push(a); }
    });
    _repoApps = unique;

    // Also populate the App Library page
    renderLibrary(unique);

    // Staff picks: first 2 featured apps
    var featured = unique.filter(function(a){ return a.featured; });
    var picks = featured.slice(0, 2);

    // Fill HEADER staff pick cards
    picks.forEach(function(app, i) {
        var card = document.getElementById('hdr-pick-'+i);
        if (!card) return;
        card.onclick = function(){ showPage('pg-apps'); };
        var sizeStr = app.size ? formatSize(app.size) : '';
        var miniosStr = app.minimumOSVersion ? 'iOS '+app.minimumOSVersion+'+' : '';
        var metaHtml = '';
        metaHtml += '<span class="zs-hdr-pick-meta-chip" style="color:var(--cyan);">v'+app.version+'</span>';
        if (miniosStr) metaHtml += '<span class="zs-hdr-pick-meta-chip"><i class="fab fa-apple"></i> '+miniosStr+'</span>';
        if (sizeStr)   metaHtml += '<span class="zs-hdr-pick-meta-chip">'+sizeStr+'</span>';
        card.innerHTML =
            '<div class="zs-hdr-pick-badge">★ PICK</div>' +
            '<div class="zs-hdr-pick-ico"><img src="'+app.iconURL+'" alt="'+app.name+'" onerror="this.parentNode.innerHTML=\'<i class=\\\"fas fa-box-open\\\" style=\\\"color:var(--dim);font-size:18px;\\\"></i>\'"></div>' +
            '<div class="zs-hdr-pick-info">' +
                '<div class="zs-hdr-pick-name">'+app.name+'</div>' +
                '<div class="zs-hdr-pick-sub">by '+app.developerName+'</div>' +
                '<div class="zs-hdr-pick-meta">'+metaHtml+'</div>' +
            '</div>';
    });

    // Fill in-page staff picks section (below filter tabs)
    var spGrid = document.getElementById('staff-picks-grid');
    if (spGrid && picks.length >= 2) {
        spGrid.innerHTML = '';
        spGrid.appendChild(buildStaffPickCard(picks[0]));
        spGrid.appendChild(buildStaffPickCard(picks[1]));
    }

    // App grid: next 6 featured apps after the 2 picks
    var gridApps = featured.slice(2, 8);
    var grid = document.getElementById('portal-app-grid');
    if (!grid) return;
    grid.innerHTML = '';
    gridApps.forEach(function(app){ grid.appendChild(buildAppCard2(app)); });
}

function filterPortalApps(cat) {
    _currentFilter = cat;
    var cards = document.querySelectorAll('#portal-app-grid .app-card2');
    cards.forEach(function(c){
        if (cat === 'all' || c.dataset.cat === cat) { c.style.display = ''; }
        else { c.style.display = 'none'; }
    });
    // Show/hide staff picks based on filter
    var picks = document.getElementById('staff-picks-wrap');
    if (picks) picks.style.display = (cat === 'all') ? '' : 'none';
}

// Fetch on load — tries direct URL first, then CORS proxy fallbacks
(function loadRepo() {
    var REPO_URL = 'https://delvek.net/repo.json';
    var CORS_PROXIES = [
        'https://corsproxy.io/?' + encodeURIComponent(REPO_URL),
        'https://api.allorigins.win/raw?url=' + encodeURIComponent(REPO_URL),
        'https://api.codetabs.com/v1/proxy?quest=' + encodeURIComponent(REPO_URL)
    ];

    function showRepoError() {
        var grid = document.getElementById('portal-app-grid');
        if (grid) grid.innerHTML = '<div style="padding:20px;text-align:center;color:var(--dim);font-size:12px;grid-column:1/-1;"><i class="fas fa-exclamation-circle" style="color:var(--orange);margin-right:6px;"></i>Could not load apps — check connection</div>';
        var spGrid = document.getElementById('staff-picks-grid');
        if (spGrid) spGrid.innerHTML = '<div style="padding:14px 16px;color:var(--dim);font-size:12px;grid-column:1/-1;"><i class="fas fa-exclamation-circle" style="color:var(--orange);margin-right:6px;"></i>Could not load staff picks</div>';
        var libBody = document.getElementById('al-list-body');
        if (libBody) libBody.innerHTML = '<div style="padding:32px;text-align:center;color:var(--dim);font-size:12px;"><i class="fas fa-exclamation-circle" style="color:var(--orange);margin-right:6px;"></i>Could not load apps — check connection</div>';
        var banner = document.getElementById('al-banner-text');
        if (banner) banner.textContent = 'Could not load repo';
    }

    // Normalise a self-hosted DB app record into repo app shape
    function normaliseDBApp(a) {
        return {
            name:              a.name,
            bundleIdentifier:  a.bundle_identifier,
            version:           a.version,
            developerName:     a.developer_name || '',
            size:              a.size_bytes || 0,
            minimumOSVersion:  a.min_ios || '',
            iconURL:           a.icon_url || '',
            versionDate:       a.created_at || '',
            locallyHosted:     true,
            appId:             a.id,
            signCount:         a.sign_count || 0,
            isFeatured:        !!a.is_featured,
            badge:             a.is_featured ? 'hot' : ''
        };
    }

    // Fetch self-hosted apps from our own API
    function fetchLocalApps() {
        return fetch('/api/apps.php?action=list&limit=50', { cache: 'no-cache' })
            .then(function(r) { return r.ok ? r.json() : { success: false }; })
            .then(function(d) {
                if (d.success && Array.isArray(d.apps) && d.apps.length > 0) {
                    return d.apps.map(normaliseDBApp);
                }
                return [];
            })
            .catch(function() { return []; });
    }

    function tryFetch(url) {
        return fetch(url, { cache: 'no-cache' })
            .then(function(r) {
                if (!r.ok) throw new Error('HTTP ' + r.status);
                return r.json();
            })
            .then(function(data) {
                var apps = null;
                if (data && Array.isArray(data.apps)) apps = data.apps;
                else if (data && Array.isArray(data)) apps = data;
                else if (data && data.items && Array.isArray(data.items)) apps = data.items;
                if (!apps || apps.length === 0) throw new Error('No apps in data');
                return apps;
            });
    }

    // Merge repo + local apps, dedupe by bundleIdentifier (local takes priority)
    function mergeAndRender(repoApps, localApps) {
        var seen = {};
        var merged = [];
        // Local apps first — they take priority over repo duplicates
        localApps.forEach(function(a) {
            var key = (a.bundleIdentifier || a.name || '').toLowerCase();
            seen[key] = true;
            merged.push(a);
        });
        repoApps.forEach(function(a) {
            var key = (a.bundleIdentifier || a.name || '').toLowerCase();
            if (!seen[key]) { seen[key] = true; merged.push(a); }
        });
        renderPortalApps(merged);
    }

    // Try repo, fall back through CORS proxies, always also fetch local
    var repoPromise = tryFetch(REPO_URL);
    CORS_PROXIES.forEach(function(proxy) {
        repoPromise = repoPromise.catch(function() { return tryFetch(proxy); });
    });
    repoPromise = repoPromise.catch(function(e) {
        console.warn('Repo fetch failed after all attempts:', e);
        return []; // repo failed — still show local apps
    });

    Promise.all([repoPromise, fetchLocalApps()])
        .then(function(results) {
            var repoApps  = results[0];
            var localApps = results[1];
            if (repoApps.length === 0 && localApps.length === 0) {
                showRepoError();
            } else {
                mergeAndRender(repoApps, localApps);
            }
        });
})();

function setTab(el) {
    var parent = el.closest('.app-filter-tabs');
    if (parent) parent.querySelectorAll('.app-tab').forEach(t => t.classList.remove('active'));
    el.classList.add('active');
}

function setNewsTab(el) {
    el.parentElement.querySelectorAll('.app-tab').forEach(t => t.classList.remove('active'));
    el.classList.add('active');
}

function toggleLibFilters() {
    var panel = document.getElementById('lib-filter-panel');
    var chevron = document.getElementById('filter-chevron');
    if (!panel) return;
    var open = panel.style.display === 'block' || panel.style.display === 'flex';
    panel.style.display = open ? 'none' : 'block';
    if (chevron) chevron.style.transform = open ? '' : 'rotate(180deg)';
}

/* ── App Library — live repo rendering ── */
var _libApps      = [];   // all apps from repo (deduped)
var _libFiltered  = [];   // after cat + search filter
var _libCat       = 'all';
var _libSearch    = '';
var _libPage      = 1;
var _libPerPage   = 15;

function renderLibrary(apps) {
    _libApps = apps;
    _libPage = 1;
    _libSearch = '';
    _libCat = 'all';
    applyLibraryFilters();
}

function applyLibraryFilters() {
    var q = _libSearch.toLowerCase().trim();
    _libFiltered = _libApps.filter(function(a) {
        var catOk = (_libCat === 'all') || (getCategoryForApp(a) === _libCat);
        if (!catOk) return false;
        if (!q) return true;
        var text = (a.name + ' ' + (a.bundleIdentifier||'') + ' ' + (a.localizedDescription||'')).toLowerCase();
        return text.includes(q);
    });
    _libPage = 1;
    renderLibraryPage();
}

function renderLibraryPage() {
    var total   = _libFiltered.length;
    var pages   = Math.max(1, Math.ceil(total / _libPerPage));
    if (_libPage > pages) _libPage = pages;
    var start   = (_libPage - 1) * _libPerPage;
    var end     = Math.min(start + _libPerPage, total);
    var slice   = _libFiltered.slice(start, end);

    // Banner + header counts
    var catLabel = _libCat === 'all' ? 'all categories' : _libCat;
    var banner = document.getElementById('al-banner-text');
    if (banner) banner.textContent = total + ' app' + (total !== 1 ? 's' : '') + ' available · ' + catLabel + (_libSearch ? ' · "' + _libSearch + '"' : '') + ' · Sorted by name';
    var countEl = document.getElementById('al-result-count');
    if (countEl) countEl.textContent = total + ' result' + (total !== 1 ? 's' : '');

    // Rows
    var body = document.getElementById('al-list-body');
    if (!body) return;
    if (total === 0) {
        body.innerHTML = '<div style="padding:32px;text-align:center;color:var(--dim);font-size:12px;"><i class="fas fa-search" style="color:var(--orange);margin-right:6px;"></i>No apps matched your search.</div>';
        updateLibraryPagination(0, 0, 0, 1, 1);
        return;
    }
    body.innerHTML = '';
    slice.forEach(function(app) {
        body.appendChild(buildLibraryRow(app));
    });
    updateLibraryPagination(start + 1, end, total, _libPage, pages);
}

function buildLibraryRow(app) {
    var div = document.createElement('div');
    div.className = 'al-row';
    div.dataset.cat = getCategoryForApp(app);

    var sizeTxt = formatSize(app.size) || '—';
    var ver     = app.version ? 'v' + app.version : '—';
    var minOs   = app.minimumOsVersion || '';
    var iosTxt  = minOs ? 'iOS ' + minOs + '+' : '—';
    var dev     = app.developerName || '';
    var bundle  = app.bundleIdentifier || '';
    var cat     = getCategoryForApp(app);
    var catLabel = cat.charAt(0).toUpperCase() + cat.slice(1);

    // Badge: featured = HOT, new within 30 days = NEW
    var badgeHtml = '';
    if (app.featured) {
        badgeHtml = '<span class="al-badge hot">HOT</span>';
    } else if (app.versionDate) {
        var d = new Date(app.versionDate);
        if (!isNaN(d) && (Date.now() - d.getTime()) < 30 * 864e5) {
            badgeHtml = '<span class="al-badge new">NEW</span>';
        }
    }

    // Icon: use iconURL if present, else coloured initials
    var iconHtml;
    if (app.iconURL) {
        iconHtml = '<div class="al-icon" style="background:#111;">' +
                       '<img src="' + app.iconURL + '" ' +
                       'onerror="this.parentNode.innerHTML=\'<span style=\\\"position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:Oswald,sans-serif;font-size:13px;font-weight:700;color:var(--dim);\\\">' + escHtml(app.name.slice(0,2).toUpperCase()) + '</span>\'">' +
                   '</div>';
    } else {
        iconHtml = '<div class="al-icon" style="background:var(--card2);">' +
                       '<span style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:\'Oswald\',sans-serif;font-size:13px;font-weight:700;color:var(--dim);">' + escHtml(app.name.slice(0,2).toUpperCase()) + '</span>' +
                   '</div>';
    }

    div.innerHTML =
        '<div class="al-app">' +
            iconHtml +
            '<div class="al-info">' +
                '<div class="al-name">' + escHtml(app.name) + ' ' + badgeHtml + '</div>' +
                '<div class="al-bundle">' + escHtml(bundle) + (dev ? ' · ' + escHtml(dev) : '') + ' · ' + catLabel + '</div>' +
            '</div>' +
        '</div>' +
        '<div class="al-cell">' + escHtml(ver) + '</div>' +
        '<div class="al-cell">' + escHtml(iosTxt) + '</div>' +
        '<div class="al-cell">' + escHtml(sizeTxt) + '</div>' +
        '<div class="al-cell" style="color:var(--green);">—</div>' +
        '<div class="al-cell"><button class="al-btn" onclick="event.stopPropagation();showToast(\'info\',\'Signing\',\'Preparing ' + escHtml(app.name).replace(/'/g,'&#39;') + '...\')">Sign</button></div>';

    div.addEventListener('click', function(e) {
        if (e.target.closest('.al-btn')) return;
        // Populate appData-style detail from repo app and open
        openRepoApp(app);
    });
    return div;
}

function escHtml(str) {
    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

function openRepoApp(app) {
    // Store full app object globally for tab rendering
    _currentDetailApp = app;

    var d = {
        name:   app.name,
        bundle: app.bundleIdentifier || '',
        ver:    app.version ? 'v' + app.version : '—',
        size:   formatSize(app.size) || '—',
        ios:    app.minimumOsVersion ? 'iOS ' + app.minimumOsVersion + '+' : '—',
        dl:     '—',
        badge:  app.featured ? 'hot' : '',
        icon:   app.iconURL || '',
        bg:     '#111',
        desc:   app.localizedDescription || ''
    };

    // Populate header fields
    var nameEl   = document.getElementById('detail-name');      if (nameEl)   nameEl.textContent   = d.name;
    var bcEl     = document.getElementById('detail-breadcrumb');if (bcEl)     bcEl.textContent     = d.name;
    var bundleEl = document.getElementById('detail-bundle');    if (bundleEl) bundleEl.textContent  = d.bundle;
    var verEl    = document.getElementById('detail-ver');       if (verEl)    verEl.textContent     = d.ver;
    var sizeEl   = document.getElementById('detail-size');      if (sizeEl)   sizeEl.textContent    = d.size;
    var iosEl    = document.getElementById('detail-ios');       if (iosEl)    iosEl.textContent     = d.ios;
    var dlEl     = document.getElementById('detail-dl');        if (dlEl)     dlEl.textContent      = d.dl;
    var signsEl  = document.getElementById('stat-signs');       if (signsEl)  signsEl.textContent   = d.dl;
    var statVerEl = document.getElementById('stat-ver');         if (statVerEl) statVerEl.textContent = d.ver;
    var bun2El   = document.getElementById('detail-bundle2');   if (bun2El)   bun2El.textContent    = d.bundle;
    var iconEl   = document.getElementById('detail-icon');
    var iconImg  = document.getElementById('detail-icon-img');
    if (iconEl)  { iconEl.style.background = d.bg; iconEl.style.backgroundSize = 'cover'; }
    if (iconImg) { iconImg.src = d.icon; iconImg.style.display = 'block'; iconImg.onerror = function(){ this.style.display='none'; }; }
    var badge = document.getElementById('detail-badge');
    if (badge) {
        badge.className = 'al-badge';
        if (d.badge === 'hot') { badge.classList.add('hot'); badge.textContent = 'HOT'; badge.style.display = ''; }
        else { badge.style.display = 'none'; }
    }

    // Render all tabs with live data
    renderDetailAbout(app);
    renderDetailScreenshots(app);
    renderDetailSimilar(app);
    renderDetailChangelog(app);

    ['tab-about','tab-screenshots','tab-changelog','tab-comments'].forEach(function(id,i){
        var el = document.getElementById(id); if (el) el.style.display = i===0?'block':'none';
    });
    document.querySelectorAll('#pg-appdetail .app-tab').forEach(function(t){ t.classList.remove('active'); });
    var firstTab = document.querySelector('#pg-appdetail .app-tab');
    if (firstTab) firstTab.classList.add('active');
    showPage('pg-appdetail');
}

function updateLibraryPagination(from, to, total, page, pages) {
    var info = document.getElementById('al-page-info');
    var btns = document.getElementById('al-page-btns');
    if (!info || !btns) return;
    info.textContent = total > 0 ? 'Showing ' + from + '–' + to + ' of ' + total + ' apps' : 'No results';
    btns.innerHTML = '';
    if (pages <= 1) return;

    function mkBtn(label, pg, active) {
        var b = document.createElement('button');
        b.className = 'pg-btn' + (active ? ' active' : '');
        b.textContent = label;
        if (pg !== null) b.addEventListener('click', function() { _libPage = pg; renderLibraryPage(); });
        else b.disabled = true;
        return b;
    }

    // Prev
    if (page > 1) btns.appendChild(mkBtn('←', page - 1, false));

    // Page numbers: show first, last, and window around current
    var shown = new Set();
    [1, pages, page-1, page, page+1].forEach(function(p) { if (p >= 1 && p <= pages) shown.add(p); });
    var sorted = Array.from(shown).sort(function(a,b){ return a-b; });
    var prev = null;
    sorted.forEach(function(p) {
        if (prev !== null && p - prev > 1) {
            var sp = document.createElement('span');
            sp.textContent = '...';
            sp.style.cssText = 'padding:0 6px;color:var(--dim);line-height:28px;';
            btns.appendChild(sp);
        }
        btns.appendChild(mkBtn(p, p, p === page));
        prev = p;
    });

    // Next
    if (page < pages) btns.appendChild(mkBtn('→', page + 1, false));
}

function filterLibrary(val) {
    _libSearch = val;
    applyLibraryFilters();
}

function filterLibraryCat(cat) {
    _libCat = cat;
    _libPage = 1;
    applyLibraryFilters();
}

/* Sign app — library picker */
function selectSignApp(card, name, bundle, ver, size) {
    document.querySelectorAll('.sign-app-card').forEach(c => c.classList.remove('selected'));
    card.classList.add('selected');
    document.getElementById('confirm-name').textContent = name;
    document.getElementById('confirm-bundle').textContent = bundle + ' · ' + ver + ' · ' + size;
    var img = card.querySelector('img');
    var icon = document.getElementById('confirm-icon');
    if (img) {
        icon.style.background = card.querySelector('.sac-icon').style.background;
        icon.innerHTML = '<img src="' + img.src + '" width="28" height="28">';
    }
}

/* Sign tab switcher */
function switchSignTab(tab) {
    document.getElementById('tab-library').classList.toggle('active', tab === 'library');
    document.getElementById('tab-upload').classList.toggle('active', tab === 'upload');
    document.getElementById('panel-library').style.display = tab === 'library' ? 'block' : 'none';
    document.getElementById('panel-upload').style.display = tab === 'upload' ? 'block' : 'none';
}

/* Option choice selector */
function selectChoice(el) {
    el.parentElement.querySelectorAll('.opt-choice').forEach(c => c.classList.remove('selected'));
    el.classList.add('selected');
}

/* Toggle switch */
function toggleOpt(el) {
    el.classList.toggle('on');
}

/* Signing animation */
function startSigning() {
    document.getElementById('sign-idle').style.display = 'none';
    document.getElementById('sign-progress').style.display = 'block';
    var steps = [
        [10,  'Step 1/4: Uploading IPA...'],
        [30,  'Step 2/4: Verifying binary...'],
        [55,  'Step 3/4: Injecting certificate...'],
        [80,  'Step 4/4: Packaging signed IPA...'],
        [100, 'Finalizing...']
    ];
    var i = 0;
    function next() {
        if (i >= steps.length) {
            setTimeout(function() {
                document.getElementById('sign-progress').style.display = 'none';
                document.getElementById('sign-done').style.display = 'block';
            }, 600);
            return;
        }
        var s = steps[i++];
        document.getElementById('sign-bar').style.width = s[0] + '%';
        document.getElementById('sign-step').textContent = s[1];
        document.getElementById('sign-pct').textContent = s[0] + '%';
        setTimeout(next, i < steps.length ? 900 : 600);
    }
    next();
}

// Wire up header "My Library" and "+ Sign App" buttons
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('a').forEach(function(a) {
        if (a.textContent.trim() === 'My Library') a.addEventListener('click', function(e){ e.preventDefault(); showPage('pg-library'); });
        if (a.textContent.trim() === '+ Sign App') a.addEventListener('click', function(e){ e.preventDefault(); showPage('pg-sign'); });
    });
});

// Set initial active
document.querySelector('.portal').classList.add('active');

/* ── App detail tab switcher ── */
function setDetailTab(el, tabId) {
    ['tab-about','tab-screenshots','tab-changelog','tab-comments'].forEach(function(id) {
        var t = document.getElementById(id); if(t) t.style.display = 'none';
    });
    document.getElementById(tabId).style.display = 'block';
    el.parentElement.querySelectorAll('.app-tab').forEach(function(t){ t.classList.remove('active'); });
    el.classList.add('active');
}

/* ── App data store ── */
var appData = {
    spotify:   { name:'Spotify++',       bundle:'com.spotify.client',          ver:'v8.9.12', size:'68 MB',   ios:'14–17', dl:'12.8k', badge:'hot',     icon:'https://cdn.simpleicons.org/spotify/1ED760',      bg:'#191414' },
    ytmusic:   { name:'YouTube Music++', bundle:'com.google.ios.ytmusic',      ver:'v7.2.1',  size:'112 MB', ios:'15–17', dl:'9.3k',  badge:'new',     icon:'https://cdn.simpleicons.org/youtube/ffffff',       bg:'#ff0000' },
    instagram: { name:'Instagram++',     bundle:'com.burbn.instagram',         ver:'v263.0',  size:'94 MB',  ios:'14–17', dl:'6.1k',  badge:'',        icon:'https://cdn.simpleicons.org/instagram/ffffff',     bg:'radial-gradient(circle at 30% 110%,#f09433,#dc2743 50%,#bc1888)' },
    snapchat:  { name:'Snapchat++',      bundle:'com.toyopagroup.picaboo',     ver:'v12.85',  size:'210 MB', ios:'15–17', dl:'5.7k',  badge:'',        icon:'https://cdn.simpleicons.org/snapchat/000000',      bg:'#FFFC00' },
    gta:       { name:'GTA San Andreas', bundle:'com.rockstargames.gtasa',     ver:'v2.11',   size:'1.4 GB', ios:'14–17', dl:'5.2k',  badge:'updated', icon:'https://cdn.simpleicons.org/rockstargames/ff6b00', bg:'#1a1a2e' },
    discord:   { name:'Discord++',       bundle:'com.hammerandchisel.discord', ver:'v222.0',  size:'88 MB',  ios:'15–17', dl:'4.8k',  badge:'',        icon:'https://cdn.simpleicons.org/discord/5865F2',       bg:'#0d1117' },
    tiktok:    { name:'TikTok++',        bundle:'com.zhiliaoapp.musically',    ver:'v33.2.0', size:'175 MB', ios:'14–17', dl:'4.4k',  badge:'new',     icon:'https://cdn.simpleicons.org/tiktok/ffffff',        bg:'#010101' },
    whatsapp:  { name:'WhatsApp++',      bundle:'net.whatsapp.WhatsApp',       ver:'v24.8.74',size:'196 MB', ios:'14–17', dl:'3.9k',  badge:'new',     icon:'https://cdn.simpleicons.org/whatsapp/ffffff',      bg:'#25D366' },
    facebook:  { name:'Facebook++',      bundle:'com.facebook.Facebook',       ver:'v446.0',  size:'244 MB', ios:'14–16', dl:'3.2k',  badge:'',        icon:'https://cdn.simpleicons.org/facebook/ffffff',      bg:'#1877F2' },
    msign:     { name:'Msign.ipa',       bundle:'xyz.msign.app',               ver:'v1.4',    size:'12 MB',  ios:'14–17', dl:'3.1k',  badge:'',        icon:'https://cdn.simpleicons.org/apple/ffffff',         bg:'linear-gradient(135deg,#ff8800,#cc5500)' }
};

function openApp(key) {
    var d = appData[key] || appData.spotify;
    // Populate header
    document.getElementById('detail-breadcrumb').textContent = d.name;
    document.getElementById('detail-name').textContent = d.name;
    document.getElementById('detail-bundle').textContent = d.bundle;
    document.getElementById('detail-ver').textContent = d.ver;
    document.getElementById('detail-size').textContent = d.size;
    document.getElementById('detail-ios').textContent = d.ios;
    document.getElementById('detail-dl').textContent = d.dl;
    document.getElementById('stat-signs').textContent = d.dl;
    var _sv = document.getElementById('stat-ver'); if (_sv) _sv.textContent = d.ver;
    document.getElementById('detail-bundle2').textContent = d.bundle;
    // Icon
    var icon = document.getElementById('detail-icon');
    icon.style.background = d.bg;
    document.getElementById('detail-icon-img').src = d.icon;
    // Badge
    var badge = document.getElementById('detail-badge');
    badge.className = 'al-badge';
    if      (d.badge === 'hot')     { badge.classList.add('hot');     badge.textContent = 'HOT'; badge.style.display = ''; }
    else if (d.badge === 'new')     { badge.classList.add('new');     badge.textContent = 'NEW'; badge.style.display = ''; }
    else if (d.badge === 'updated') { badge.classList.add('updated'); badge.textContent = 'UPD'; badge.style.display = ''; }
    else { badge.style.display = 'none'; }

    // Build a synthetic app object for dynamic rendering
    var synth = {
        name: d.name,
        bundleIdentifier: d.bundle,
        version: d.ver.replace(/^v/,''),
        size: null,
        minimumOsVersion: null,
        localizedDescription: '',
        iconURL: d.icon,
        screenshotURLs: [],
        versionDate: null,
        developerName: 'MSIGN Encoder'
    };
    _currentDetailApp = synth;
    renderDetailAbout(synth);
    renderDetailScreenshots(synth);
    renderDetailSimilar(synth);
    renderDetailChangelog(synth);

    // Reset tabs to About
    ['tab-about','tab-screenshots','tab-changelog','tab-comments'].forEach(function(id,i){
        document.getElementById(id).style.display = i===0 ? 'block' : 'none';
    });
    document.querySelectorAll('#pg-appdetail .app-tab').forEach(function(t){ t.classList.remove('active'); });
    var firstTab = document.querySelector('#pg-appdetail .app-tab');
    if (firstTab) firstTab.classList.add('active');
    showPage('pg-appdetail');
}

// Wire up app cards after DOM ready
document.addEventListener('DOMContentLoaded', function() {
    // Portal app grid (6 cards)
    var portalKeys = ['spotify','ytmusic','instagram','snapchat','gta','msign'];
    document.querySelectorAll('#pg-portal .app-card2').forEach(function(card, i) {
        card.style.cursor = 'pointer';
        (function(k){ card.addEventListener('click', function(){ openApp(k); }); })(portalKeys[i] || 'spotify');
    });
    // Browse All rows (skip click on Sign button) — now dynamic, handled in buildLibraryRow
    // Trending sidebar
    var trendKeys = ['spotify','snapchat','gta','instagram','ytmusic'];
    document.querySelectorAll('.trending-row').forEach(function(row, i) {
        row.style.cursor = 'pointer';
        (function(k){ row.addEventListener('click', function(){ openApp(k); }); })(trendKeys[i] || 'spotify');
    });
});

/* ════════════════════════════════════════
   MODAL SYSTEM
════════════════════════════════════════ */
var currentModalUser = { username: 'iOS_Dev', initials: 'iD', color: 'var(--yellow)', hex: '#ffd000' };

function openModal(id, user) {
  if (user) currentModalUser = Object.assign({}, currentModalUser, user);
  document.getElementById(id).classList.add('open');
  document.body.style.overflow = 'hidden';
}

function closeModal(id) {
  document.getElementById(id).classList.remove('open');
  // Only restore scroll if no other modals open
  if (!document.querySelector('.zs-modal-overlay.open')) {
    document.body.style.overflow = '';
  }
}

// Close modal on overlay click
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('zs-modal-overlay')) {
    e.target.classList.remove('open');
    if (!document.querySelector('.zs-modal-overlay.open')) {
      document.body.style.overflow = '';
    }
  }
});

/* Toast system */
function showToast(type, title, text, duration) {
  duration = duration || 3000;
  var icons = { success: 'fas fa-check-circle', error: 'fas fa-times-circle', info: 'fas fa-info-circle', warning: 'fas fa-exclamation-triangle' };
  var toast = document.createElement('div');
  toast.className = 'zs-toast ' + type;
  toast.innerHTML = '<i class="' + (icons[type]||icons.info) + ' zs-toast-icon"></i><div class="zs-toast-text"><span class="zs-toast-title">' + title + '</span>' + text + '</div>';
  document.getElementById('toast-container').appendChild(toast);
  setTimeout(function(){ toast.classList.add('show'); }, 10);
  setTimeout(function(){
    toast.classList.remove('show');
    setTimeout(function(){ if(toast.parentNode) toast.parentNode.removeChild(toast); }, 350);
  }, duration);
}

/* Open PM modal for a specific user */
function openPMModal(username, initials, colorVar, hexColor) {
  username = username || currentModalUser.username;
  initials = initials || currentModalUser.initials;
  hexColor = hexColor || currentModalUser.hex;
  document.getElementById('pm-to-av').textContent = initials;
  document.getElementById('pm-to-av').style.borderColor = hexColor;
  document.getElementById('pm-to-av').style.color = hexColor;
  document.getElementById('pm-to-av').style.background = hexColor.replace('#','rgba(').replace(/([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i, function(m, r, g, b){
    return parseInt(r,16)+','+parseInt(g,16)+','+parseInt(b,16);
  }) + ',0.08)';
  document.getElementById('pm-to-name').textContent = username;
  document.getElementById('pm-to-name').style.color = hexColor;
  document.getElementById('pm-subject').value = '';
  document.getElementById('pm-body').value = '';
  currentModalUser = { username, initials, hex: hexColor };
  openModal('modal-pm');
}

function sendPM() {
  var subject = document.getElementById('pm-subject').value.trim();
  var body = document.getElementById('pm-body').value.trim();
  if (!subject) { document.getElementById('pm-subject').focus(); showToast('warning','Missing Subject','Please enter a subject.'); return; }
  if (!body) { document.getElementById('pm-body').focus(); showToast('warning','Missing Message','Please write a message.'); return; }
  closeModal('modal-pm');
  showToast('success', 'Message Sent', 'Your PM to ' + currentModalUser.username + ' was delivered.');
}

/* Open Rep modal */
function openRepModal(username, initials, hexColor, currentRep) {
  username = username || currentModalUser.username;
  initials = initials || currentModalUser.initials;
  hexColor = hexColor || currentModalUser.hex;
  currentRep = currentRep || '+841';
  document.getElementById('rep-av').textContent = initials;
  document.getElementById('rep-av').style.borderColor = hexColor;
  document.getElementById('rep-av').style.color = hexColor;
  document.getElementById('rep-username').textContent = username;
  document.getElementById('rep-current').textContent = currentRep;
  document.getElementById('rep-reason').value = '';
  document.querySelectorAll('.rep-type-btn').forEach(function(b){ b.classList.remove('selected'); });
  document.querySelector('.rep-type-btn').classList.add('selected');
  currentModalUser = { username, initials, hex: hexColor };
  openModal('modal-rep');
}

function selectRepType(el, type) {
  document.querySelectorAll('.rep-type-btn').forEach(function(b){ b.classList.remove('selected'); });
  el.classList.add('selected');
}

function submitRep() {
  var selected = document.querySelector('.rep-type-btn.selected');
  var type = selected && selected.getAttribute('onclick').indexOf('negative') > -1 ? 'negative' : 'positive';
  closeModal('modal-rep');
  showToast('success', 'Rep Given', (type === 'positive' ? '+1 Rep given' : '-1 Rep given') + ' to ' + currentModalUser.username);
}

/* Open Vouch modal */
function openVouchModal(username, initials, hexColor) {
  username = username || currentModalUser.username;
  initials = initials || currentModalUser.initials;
  hexColor = hexColor || currentModalUser.hex;
  document.getElementById('vouch-av').textContent = initials;
  document.getElementById('vouch-av').style.borderColor = hexColor;
  document.getElementById('vouch-av').style.color = hexColor;
  document.getElementById('vouch-username').textContent = username;
  document.getElementById('vouch-text').value = '';
  document.querySelectorAll('.vouch-tag-btn').forEach(function(b){ b.classList.remove('selected'); });
  setVouchStars(5);
  currentModalUser = { username, initials, hex: hexColor };
  openModal('modal-vouch');
}

var vouchStarRating = 5;
function setVouchStars(n) {
  vouchStarRating = n;
  document.querySelectorAll('.vouch-star').forEach(function(s, i) {
    s.classList.toggle('active', i < n);
  });
}
function toggleVouchTag(el) { el.classList.toggle('selected'); }

function submitVouch() {
  closeModal('modal-vouch');
  showToast('success', 'Vouch Submitted', 'Your vouch for ' + currentModalUser.username + ' was recorded. (' + vouchStarRating + '/5 ⭐)');
}

/* Open Report modal */
function openReportModal(username) {
  username = username || currentModalUser.username;
  document.getElementById('report-username').textContent = username;
  document.getElementById('report-detail').value = '';
  document.querySelectorAll('.report-reason').forEach(function(r){ r.classList.remove('selected'); });
  document.querySelector('.report-reason').classList.add('selected');
  openModal('modal-report');
}

function selectReportReason(el) {
  document.querySelectorAll('.report-reason').forEach(function(r){ r.classList.remove('selected'); });
  el.classList.add('selected');
}

function submitReport() {
  closeModal('modal-report');
  showToast('info', 'Report Submitted', 'Our moderation team will review this report within 24 hours.');
}

/* Friend request */
function openFriendModal(username, initials, hexColor) {
  username = username || currentModalUser.username;
  initials = initials || currentModalUser.initials;
  hexColor = hexColor || currentModalUser.hex;
  document.getElementById('friend-av').textContent = initials;
  document.getElementById('friend-av').style.borderColor = hexColor;
  document.getElementById('friend-av').style.color = hexColor;
  document.getElementById('friend-username').textContent = username;
  currentModalUser = { username, initials, hex: hexColor };
  openModal('modal-friend');
}
function submitFriendReq() {
  closeModal('modal-friend');
  showToast('success', 'Friend Request Sent', 'Request sent to ' + currentModalUser.username + '.');
}

/* Inbox & PM Read */
function viewPM(username, initials, colorVar, hexColor, subject, body) {
  closeModal('modal-inbox');
  document.getElementById('pm-read-av').textContent = initials;
  document.getElementById('pm-read-av').style.borderColor = hexColor;
  document.getElementById('pm-read-av').style.color = hexColor;
  document.getElementById('pm-read-from').textContent = username;
  document.getElementById('pm-read-from').style.color = hexColor;
  document.getElementById('pm-read-time').textContent = 'Received via Private Message';
  document.getElementById('pm-read-subject').textContent = subject;
  document.getElementById('pm-read-body').textContent = body;
  currentModalUser = { username, initials, hex: hexColor };
  openModal('modal-pm-read');
}

function replyToPM() {
  closeModal('modal-pm-read');
  openPMModal(currentModalUser.username, currentModalUser.initials, '', currentModalUser.hex);
  document.getElementById('pm-subject').value = 'RE: ' + document.getElementById('pm-read-subject').textContent;
}

/* Notifications dropdown */
var notifOpen = false;
function toggleNotifDropdown(el) {
  var dd = document.getElementById('notif-dropdown');
  notifOpen = !notifOpen;
  dd.classList.toggle('open', notifOpen);
  // Position relative to the button
  var rect = el.getBoundingClientRect();
  dd.style.position = 'fixed';
  dd.style.top = (rect.bottom + 6) + 'px';
  dd.style.right = (window.innerWidth - rect.right) + 'px';
}

function toggleMsgDropdown() {
  openModal('modal-inbox');
}

document.addEventListener('click', function(e) {
  if (!e.target.closest('#notif-dropdown') && !e.target.closest('[onclick*="toggleNotifDropdown"]')) {
    if (notifOpen) {
      document.getElementById('notif-dropdown').classList.remove('open');
      notifOpen = false;
    }
  }
});

function handleNotif(el) {
  el.classList.remove('unread');
  var dot = el.querySelector('[style*="border-radius:50%"]');
  if (dot) dot.style.display = 'none';
}

function markAllRead() {
  document.querySelectorAll('.notif-row.unread').forEach(function(r){ r.classList.remove('unread'); });
  document.querySelectorAll('.notif-row [style*="border-radius:50%"]').forEach(function(d){ d.style.display='none'; });
}

/* Post like toggle */
function toggleLike(btn) {
  btn.classList.toggle('liked');
  var icon = btn.querySelector('i');
  var text = btn.textContent.trim();
  var num = parseInt(text.replace(/[^0-9]/g,''));
  if (btn.classList.contains('liked')) {
    btn.innerHTML = '<i class="fas fa-thumbs-up"></i> ' + (num+1);
    showToast('success','Post Liked','You liked this post.');
  } else {
    btn.innerHTML = '<i class="fas fa-thumbs-up"></i> ' + (num-1);
  }
}

/* Reply post button */
function postReply(btn) {
  var ta = btn.closest('[style]').querySelector('textarea') || btn.closest('div').parentElement.querySelector('textarea');
  if (!ta) ta = document.querySelector('#reply-anchor textarea') || document.querySelector('.reply-textarea');
  if (ta && ta.value.trim()) {
    showToast('success','Reply Posted','Your reply has been posted.');
    ta.value = '';
  } else {
    showToast('warning','Empty Reply','Please write something before posting.');
    if (ta) ta.focus();
  }
}

/* Wire up all Send PM buttons, +Rep buttons, Vouch buttons on profile page */
document.addEventListener('DOMContentLoaded', function() {
  // Profile action buttons (in #v-profile)
  var profileBtns = document.querySelectorAll('#v-profile .prof-btn');
  profileBtns.forEach(function(btn) {
    var text = btn.textContent.trim();
    if (text.includes('Send PM') || text.includes('PM')) {
      btn.onclick = function() { openPMModal('iOS_Dev','iD','','#ffd000'); };
    } else if (text.includes('Rep')) {
      btn.onclick = function() { openRepModal('iOS_Dev','iD','#00e87a','+841'); };
    } else if (text.includes('Vouch')) {
      btn.onclick = function() { openVouchModal('iOS_Dev','iD','#9d5cff'); };
    } else if (text.includes('fa-user-plus') || btn.querySelector('.fa-user-plus')) {
      btn.onclick = function() { openFriendModal('iOS_Dev','iD','#00d4ff'); };
    } else if (btn.querySelector('.fa-flag')) {
      btn.onclick = function() { openReportModal('iOS_Dev'); };
    }
  });

  // Post-level +Rep, Vouch buttons in poster cards
  document.querySelectorAll('.pb-action-btn.rep').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var card = btn.closest('.poster-card');
      var username = card ? (card.querySelector('.pb-username')||{}).textContent : 'User';
      var initials = (username||'U').substring(0,2).toUpperCase();
      openRepModal(username.trim(), initials, '#00e87a', '+841');
    });
  });
  document.querySelectorAll('.pb-action-btn.vouch').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var card = btn.closest('.poster-card');
      var username = card ? (card.querySelector('.pb-username')||{}).textContent : 'User';
      var initials = (username||'U').substring(0,2).toUpperCase();
      openVouchModal(username.trim(), initials, '#9d5cff');
    });
  });

  // Post-level like buttons
  document.querySelectorAll('.post-action-btn').forEach(function(btn) {
    if (btn.querySelector('.fa-thumbs-up') && !btn.hasAttribute('data-wired')) {
      btn.setAttribute('data-wired','1');
      btn.addEventListener('click', function() { toggleLike(btn); });
    }
  });

  // Post reply buttons in thread
  document.querySelectorAll('.reply-textarea').forEach(function(ta) {
    var container = ta.closest('div');
    var sendBtns = container ? container.querySelectorAll('button') : [];
    sendBtns.forEach(function(b) {
      if (b.textContent.trim() === 'Post Reply' || b.textContent.includes('REPLY') || b.textContent.includes('POST')) {
        if (!b.hasAttribute('data-reply-wired')) {
          b.setAttribute('data-reply-wired','1');
          b.addEventListener('click', function() { postReply(b); });
        }
      }
    });
  });

  // Wire pc-act-btn (poster card action buttons in dylib posts)
  document.querySelectorAll('.pc-act-btn.pm').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var card = btn.closest('[style*="grid-template-columns:160px"]') || btn.closest('.dylib-layout');
      var nameEl = card ? card.querySelector('[style*="font-weight:700"][style*="color:var(--yellow)"], [style*="font-weight:700"][style*="color:var(--cyan)"]') : null;
      var username = nameEl ? nameEl.textContent.trim() : 'User';
      var initials = username.substring(0,2).toUpperCase();
      var isYellow = nameEl && nameEl.style.color.indexOf('yellow') > -1;
      openPMModal(username, initials, '', isYellow ? '#ffd000' : '#00d4ff');
    });
  });

  // Wire notif bell and mail envelope in topbar  
  var topbarNotifs = document.querySelectorAll('.zs-topnav-notif, .topbar-notif');
  topbarNotifs.forEach(function(btn, i) {
    if (!btn.hasAttribute('data-wired')) {
      btn.setAttribute('data-wired','1');
      if (i === 0) {
        btn.style.cursor = 'pointer';
        btn.setAttribute('onclick', 'toggleNotifDropdown(this)');
        btn.style.position = 'relative';
      } else {
        btn.style.cursor = 'pointer';
        btn.setAttribute('onclick', 'toggleMsgDropdown()');
      }
    }
  });

  // Wire profile page tab buttons (profileSetTab is already wired via inline onclick)
  // Wire comment reply buttons in dylib pages
  document.querySelectorAll('.cm-actions span').forEach(function(span) {
    if (span.querySelector('.fa-thumbs-up') && !span.hasAttribute('data-wired')) {
      span.setAttribute('data-wired','1');
      span.style.cursor = 'pointer';
      span.addEventListener('click', function() {
        var icon = span.querySelector('i');
        if (icon && icon.className.includes('fa-thumbs-up')) {
          var num = parseInt(span.textContent.replace(/[^0-9]/g,''));
          span.innerHTML = '<i class="fas fa-thumbs-up"></i> ' + (num+1);
          span.style.color = 'var(--orange)';
        }
      });
    }
    if (span.querySelector('.fa-reply') && !span.hasAttribute('data-reply-wired')) {
      span.setAttribute('data-reply-wired','1');
      span.style.cursor = 'pointer';
      span.addEventListener('click', function() {
        var card = span.closest('.sec-card');
        if (card) {
          var ta = card.querySelector('textarea');
          if (ta) {
            var nameEl = span.closest('.comment-row');
            var name = nameEl ? (nameEl.querySelector('.cm-name')||{}).textContent : '';
            ta.value = (name ? '@' + name + ' ' : '');
            ta.focus();
            ta.scrollIntoView({ behavior: 'smooth', block: 'center' });
          }
        }
      });
    }
  });

  // Reply post button in thread
  var mainReplyBtn = document.querySelector('[onclick*="reply-anchor"]');
  if (mainReplyBtn) {
    // already has scroll-to behavior, just add toast on textarea send
  }

  // Wire main thread reply button (the "Post Reply" button)
  document.querySelectorAll('#v-posts button').forEach(function(btn) {
    if ((btn.textContent || '').includes('Post Reply') && !btn.hasAttribute('data-wired')) {
      btn.setAttribute('data-wired','1');
      btn.addEventListener('click', function() {
        var ta = document.querySelector('.reply-textarea');
        if (ta && ta.value.trim()) {
          showToast('success','Reply Posted','Your reply was added to the thread.');
          ta.value = '';
        } else {
          showToast('warning','Empty Reply','Write your reply first.');
          if (ta) ta.focus();
        }
      });
    }
  });

  // Watch/subscribe button in thread header
  document.querySelectorAll('.tc-btn').forEach(function(btn) {
    if ((btn.textContent||'').includes('Watch') && !btn.hasAttribute('data-wired')) {
      btn.setAttribute('data-wired','1');
      var watching = false;
      btn.addEventListener('click', function() {
        watching = !watching;
        btn.innerHTML = watching ? '<i class="fas fa-bell-slash"></i> Unwatch' : '<i class="fas fa-bell"></i> Watch';
        showToast(watching ? 'success' : 'info', watching ? 'Thread Watched' : 'Unwatched', watching ? 'You will be notified of new replies.' : 'Notifications disabled for this thread.');
      });
    }
    if (btn.querySelector('.fa-share-alt') && !btn.hasAttribute('data-wired')) {
      btn.setAttribute('data-wired','1');
      btn.addEventListener('click', function() {
        showToast('info','Link Copied','Thread URL copied to clipboard.');
      });
    }
    if (btn.querySelector('.fa-flag') && !btn.hasAttribute('data-wired')) {
      btn.setAttribute('data-wired','1');
      btn.addEventListener('click', function() { openReportModal('Thread'); });
    }
  });

  // Profile avatar click → open modal
  var profAv = document.getElementById('prof-avatar-el');
  if (profAv) {
    profAv.addEventListener('click', function(e) {
      if (e.target.closest('.av-edit-overlay')) {
        openAvModal();
      }
    });
  }

  // Topbar user dropdown — clicking user avatar
  var topbarUser = document.querySelector('.topbar-user, .zs-user-bar');
  if (topbarUser && !topbarUser.hasAttribute('data-wired')) {
    topbarUser.setAttribute('data-wired','1');
    topbarUser.style.cursor = 'pointer';
    topbarUser.addEventListener('click', function() {
      openProfile('admin', '#ff7a00');
    });
  }

  // Sign page SIGN button
  var signBtn = document.getElementById('sign-btn') || document.querySelector('[onclick="startSigning()"]');
  // Already wired via inline onclick

  // Inline dylib comment textareas — POST button  
  document.addEventListener('click', function(e) {
    var btn = e.target.closest('button');
    if (!btn) return;
    var text = btn.textContent.trim();
    if (text === 'POST' && !btn.hasAttribute('data-wired')) {
      btn.setAttribute('data-wired','1');
      var wrapper = btn.closest('div');
      var ta = wrapper ? wrapper.querySelector('textarea') : null;
      if (!ta) { ta = btn.closest('[style]').querySelector('textarea'); }
      if (ta && ta.value.trim()) {
        showToast('success','Reply Posted','Your reply was added.');
        ta.value = '';
      } else {
        showToast('warning','Empty Reply','Please write something first.');
        if (ta) ta.focus();
      }
    }
  });

  // Pagination buttons — just show toast
  document.querySelectorAll('.pg-btn, .pg-b').forEach(function(btn) {
    if (!btn.hasAttribute('data-wired') && !btn.classList.contains('active') && !/[<>›‹]/.test(btn.textContent) && btn.textContent !== '...') {
      btn.setAttribute('data-wired','1');
      btn.addEventListener('click', function() {
        btn.closest('.pagination, .pg-pages').querySelectorAll('.pg-btn, .pg-b').forEach(function(b){ b.classList.remove('active'); });
        btn.classList.add('active');
        showToast('info','Page Changed','Loading page ' + btn.textContent + '...');
      });
    }
  });

});

/* Override openProfile to set user context and update profile content */
var USER_DATA = {
  'iOS_Dev':  { initials:'iD', hex:'#ffd000', color:'var(--yellow)', role:'Encoder · VIP', rep:'+841', posts:'6,119', ipas:'214', device:'iPhone 15 Pro · iOS 17.4', bio:'iOS developer and IPA encoder. If it\'s signed and tweaked on MSIGN, there\'s a good chance I built it.', badges:['pb-encoder','pb-vip','pb-verified','pb-trusted','pb-og'] },
  'ZEFv':     { initials:'ZE', hex:'#00d4ff', color:'var(--cyan)',   role:'Developer',     rep:'+1.2k', posts:'8,204', ipas:'89', device:'iPhone 14 · iOS 17.2', bio:'iOS dev and hook writer. Ships dylibs that actually work. TrustCore integration specialist.', badges:['pb-vip','pb-verified','pb-trusted'] },
  'xXDarkXx': { initials:'xX', hex:'#ff3dcd', color:'var(--pink)',   role:'VIP Member',    rep:'+312', posts:'1,841', ipas:'0',  device:'iPhone 13 · iOS 16.7', bio:'Power user. Testing builds since 2021. If it crashes I will find it.', badges:['pb-vip'] },
  'n3wbie_42':{ initials:'n3', hex:'#8899aa', color:'var(--grey)',   role:'Member',        rep:'+12',  posts:'44',    ipas:'0',  device:'iPhone 12 · iOS 16.5', bio:'New here, still learning the ropes.', badges:[] },
  'admin':    { initials:'AD', hex:'#ff4444', color:'#ff4444',       role:'Administrator', rep:'+2.1k', posts:'12,441',ipas:'0', device:'iPhone 15 Pro Max · iOS 17.4', bio:'Forum admin. DM for support or abuse reports.', badges:['pb-vip','pb-verified'] },
};

var origOpenProfile = openProfile;
function openProfile(username, colorHint) {
  var u = USER_DATA[username] || { initials: (username||'U').substring(0,2).toUpperCase(), hex:'#8899aa', color:'var(--grey)', role:'Member', rep:'+0', posts:'0', ipas:'0', device:'Unknown', bio:'', badges:[] };
  currentModalUser = { username: username, initials: u.initials, hex: u.hex };

  // Update breadcrumb
  var bc = document.getElementById('profile-breadcrumb-name');
  if (bc) bc.textContent = username;

  // Update profile name
  var pname = document.querySelector('#v-profile .profile-name');
  if (pname) {
    pname.innerHTML = username + ' <i class="fas fa-circle-check verified-icon"></i>';
  }

  // Update avatar
  var av = document.getElementById('prof-avatar-el');
  if (av) {
    var existImg = av.querySelector('.profile-avatar-img');
    if (!existImg) {
      av.style.color = u.hex;
      av.style.borderColor = u.hex;
      av.style.boxShadow = '0 0 30px ' + u.hex + '44, 0 0 0 1px ' + u.hex + '22';
      // Set initials (keep overlay)
      var overlay = av.querySelector('.av-edit-overlay');
      av.childNodes.forEach(function(n){ if(n.nodeType === 3) n.textContent = ''; });
      av.insertBefore(document.createTextNode(u.initials), av.firstChild);
    }
  }

  // Update title / subtitle
  var title = document.querySelector('#v-profile .profile-title');
  if (title) title.textContent = '// ' + u.role;

  // Update profile actions
  document.querySelectorAll('#v-profile .prof-btn').forEach(function(btn) {
    if (btn.textContent.includes('Send PM') || btn.textContent.includes('PM')) {
      btn.onclick = function() { openPMModal(username, u.initials, '', u.hex); };
    } else if (btn.textContent.includes('Rep')) {
      btn.onclick = function() { openRepModal(username, u.initials, u.hex, u.rep); };
    } else if (btn.textContent.includes('Vouch')) {
      btn.onclick = function() { openVouchModal(username, u.initials, u.hex); };
    } else if (btn.querySelector('.fa-user-plus')) {
      btn.onclick = function() { openFriendModal(username, u.initials, u.hex); };
    } else if (btn.querySelector('.fa-flag')) {
      btn.onclick = function() { openReportModal(username); };
    }
  });

  showView('v-profile');
  if (typeof profileRenderPresets === 'function') profileRenderPresets();
  window.scrollTo(0,0);
}


/* ═══════════════════════════════════════════
   PROFILE — BACKGROUND CUSTOMIZATION
═══════════════════════════════════════════ */
var BG_PRESETS = [
  { label:'Default',  value:'linear-gradient(135deg,#0d0d14 0%,#12121e 50%,#0a0a12 100%)' },
  { label:'Cyber',    value:'linear-gradient(135deg,#0a0014 0%,#1a0030 40%,#000a1a 100%)' },
  { label:'Fire',     value:'linear-gradient(135deg,#1a0500 0%,#2a0800 50%,#0a0300 100%)' },
  { label:'Ocean',    value:'linear-gradient(135deg,#00060d 0%,#001a26 50%,#000810 100%)' },
  { label:'Forest',   value:'linear-gradient(135deg,#010a01 0%,#061a06 50%,#020e02 100%)' },
  { label:'Dusk',     value:'linear-gradient(135deg,#0d0010 0%,#1a0028 40%,#0a000d 100%)' },
  { label:'Steel',    value:'linear-gradient(135deg,#060810 0%,#101420 50%,#080a14 100%)' },
  { label:'Gold',     value:'linear-gradient(135deg,#100800 0%,#1e1000 50%,#0a0600 100%)' },
  { label:'Pink',     value:'linear-gradient(135deg,#10000a 0%,#220010 50%,#0a0008 100%)' },
  { label:'Ice',      value:'linear-gradient(135deg,#00080e 0%,#001a20 50%,#000608 100%)' },
  { label:'Ember',    value:'linear-gradient(135deg,#1a0800,#300e00,#1a0500)' },
  { label:'Void',     value:'linear-gradient(135deg,#050505,#0a0a0a,#030303)' },
];

var _currentBgPreset = 0;

function profileRenderPresets() {
  var grid = document.getElementById('prof-bg-presets');
  if (!grid) return;
  grid.innerHTML = '';
  BG_PRESETS.forEach(function(p, i) {
    var el = document.createElement('div');
    el.className = 'bg-preset' + (i === _currentBgPreset ? ' active' : '');
    el.style.background = p.value;
    el.title = p.label;
    el.onclick = function() {
      _currentBgPreset = i;
      profileSetBg(p.value);
      grid.querySelectorAll('.bg-preset').forEach(function(x){ x.classList.remove('active'); });
      el.classList.add('active');
    };
    grid.appendChild(el);
  });
}

function profileSetBg(value) {
  var bannerImg = document.getElementById('prof-banner-img');
  if (!bannerImg) return;
  // If value looks like a URL, use background-image
  if (value.startsWith('http') || value.startsWith('/') || value.startsWith('data:')) {
    bannerImg.style.backgroundImage = 'url(' + value + ')';
    bannerImg.style.background = '';
  } else {
    bannerImg.style.background = value;
    bannerImg.style.backgroundImage = '';
  }
  bannerImg.style.backgroundSize = 'cover';
  bannerImg.style.backgroundPosition = 'center';
}

function profileToggleBgPanel() {
  var panel = document.getElementById('prof-bg-panel');
  if (!panel) return;
  var isOpen = panel.classList.toggle('open');
  if (isOpen) profileRenderPresets();
}

function profileApplyBgUrl() {
  var input = document.getElementById('prof-bg-url-input');
  if (!input) return;
  var val = input.value.trim();
  if (!val) { showToast('warning','No URL','Paste an image URL first.'); return; }
  profileSetBg(val);
  document.getElementById('prof-bg-panel').classList.remove('open');
  showToast('success','Background Updated','Profile background has been changed.');
}

/* ═══════════════════════════════════════════
   PROFILE — AVATAR MODAL
═══════════════════════════════════════════ */
var _avPendingUrl = '';

function openAvModal() {
  var modal = document.getElementById('prof-av-modal');
  if (!modal) return;
  // Mirror current avatar into preview
  var profAv = document.getElementById('prof-avatar-el');
  var preview = document.getElementById('av-modal-preview-el');
  if (profAv && preview) {
    var existImg = profAv.querySelector('.profile-avatar-img');
    if (existImg) {
      preview.innerHTML = '<img src="' + existImg.src + '" style="width:100%;height:100%;object-fit:cover;">';
      _avPendingUrl = existImg.src;
    } else {
      // Show initials
      var text = '';
      profAv.childNodes.forEach(function(n){ if(n.nodeType===3) text += n.textContent.trim(); });
      preview.innerHTML = text || 'iD';
      preview.style.color = profAv.style.color || 'var(--orange)';
      _avPendingUrl = '';
    }
  }
  document.getElementById('av-modal-url').value = '';
  modal.classList.add('open');
}

function closeAvModal() {
  var modal = document.getElementById('prof-av-modal');
  if (modal) modal.classList.remove('open');
  _avPendingUrl = '';
}

function avModalFileChosen(input) {
  var file = input.files[0];
  if (!file) return;
  var reader = new FileReader();
  reader.onload = function(e) {
    _avPendingUrl = e.target.result;
    var preview = document.getElementById('av-modal-preview-el');
    if (preview) preview.innerHTML = '<img src="' + e.target.result + '" style="width:100%;height:100%;object-fit:cover;">';
    showToast('info','Image Loaded','Click Apply to set as your avatar.');
  };
  reader.readAsDataURL(file);
}

function avModalUrlPreview(url) {
  if (!url.trim()) return;
  _avPendingUrl = url.trim();
  var preview = document.getElementById('av-modal-preview-el');
  if (!preview) return;
  var img = document.createElement('img');
  img.src = url.trim();
  img.style.cssText = 'width:100%;height:100%;object-fit:cover;';
  img.onerror = function() { this.style.opacity = '0'; };
  preview.innerHTML = '';
  preview.appendChild(img);
}

function avModalApply() {
  if (!_avPendingUrl) {
    showToast('warning','Nothing to Apply','Upload an image or paste a URL first.');
    return;
  }
  var profAv = document.getElementById('prof-avatar-el');
  if (profAv) {
    var existing = profAv.querySelector('.profile-avatar-img');
    if (existing) existing.remove();
    var img = document.createElement('img');
    img.className = 'profile-avatar-img';
    img.src = _avPendingUrl;
    profAv.appendChild(img);
  }
  closeAvModal();
  showToast('success','Avatar Updated','Your profile picture has been changed.');
}

function avModalReset() {
  var profAv = document.getElementById('prof-avatar-el');
  if (profAv) {
    var existing = profAv.querySelector('.profile-avatar-img');
    if (existing) existing.remove();
  }
  var preview = document.getElementById('av-modal-preview-el');
  if (preview) {
    var text = 'iD';
    var av = document.getElementById('prof-avatar-el');
    if (av) {
      av.childNodes.forEach(function(n){ if(n.nodeType===3 && n.textContent.trim()) text = n.textContent.trim(); });
    }
    preview.innerHTML = text;
  }
  _avPendingUrl = '';
  showToast('info','Avatar Reset','Profile picture removed.');
}

// Close avatar modal on backdrop click
document.addEventListener('click', function(e) {
  var modal = document.getElementById('prof-av-modal');
  if (modal && modal.classList.contains('open') && e.target === modal) {
    closeAvModal();
  }
});

/* ═══════════════════════════════════════════
   PROFILE — TAB SYSTEM
═══════════════════════════════════════════ */
function profileSetTab(el, tabId) {
  // Hide all tab contents in profile
  document.querySelectorAll('#v-profile .tab-content').forEach(function(t) {
    t.classList.remove('active');
    t.style.display = 'none';
  });
  // Show target
  var target = document.getElementById(tabId);
  if (target) {
    target.classList.add('active');
    target.style.display = '';
  }
  // Update tab bar active state
  var bar = el.closest('.tab-bar');
  if (bar) {
    bar.querySelectorAll('.tab-item').forEach(function(t){ t.classList.remove('active'); });
  }
  el.classList.add('active');
}

// Init tab system on load — make sure only active tab shows
(function initProfileTabs() {
  document.querySelectorAll('#v-profile .tab-content').forEach(function(t) {
    if (!t.classList.contains('active')) {
      t.style.display = 'none';
    }
  });
})();


/* ═══════════════════════════════════════════════════
   UCP / ACP — JAVASCRIPT
════════════════════════════════════════════════════ */

/* ── Open / Close ── */
function openNotifPanel() {
  document.getElementById('notif-overlay').classList.add('open');
}
function closeNotifPanel() {
  document.getElementById('notif-overlay').classList.remove('open');
}
function notifPane(id, navEl) {
  document.querySelectorAll('#notif-overlay .cp-pane').forEach(function(p){ p.classList.remove('active'); });
  var pane = document.getElementById(id);
  if (pane) pane.classList.add('active');
  if (navEl) {
    document.querySelectorAll('#notif-overlay .cp-nav-item').forEach(function(i){ i.classList.remove('active'); });
    navEl.classList.add('active');
  }
}

function openPMPanel() {
  document.getElementById('pm-overlay').classList.add('open');
}
function closePMPanel() {
  document.getElementById('pm-overlay').classList.remove('open');
}
function pmPane(id, navEl) {
  document.querySelectorAll('#pm-overlay .cp-pane').forEach(function(p){ p.classList.remove('active'); });
  var pane = document.getElementById(id);
  if (pane) pane.classList.add('active');
  if (navEl) {
    document.querySelectorAll('#pm-overlay .cp-nav-item').forEach(function(i){ i.classList.remove('active'); });
    navEl.classList.add('active');
  } else if (id === 'pm-inbox') {
    // restore inbox nav highlight when using back button
    var inboxNav = document.querySelector('#pm-overlay .cp-nav-item');
    if (inboxNav) { document.querySelectorAll('#pm-overlay .cp-nav-item').forEach(function(i){ i.classList.remove('active'); }); inboxNav.classList.add('active'); }
  }
}


function openUCP() {
  document.getElementById('ucp-overlay').classList.add('open');
  document.body.style.overflow = 'hidden';
  ucpPane('ucp-profile');
  ucpInitBannerPresets();
  ucpSyncAvatar();
}
function closeUCP() {
  document.getElementById('ucp-overlay').classList.remove('open');
  document.body.style.overflow = '';
}
function openACP() {
  document.getElementById('acp-overlay').classList.add('open');
  document.body.style.overflow = 'hidden';
  acpPane('acp-users');
}
function closeACP() {
  document.getElementById('acp-overlay').classList.remove('open');
  document.body.style.overflow = '';
}
// Close on backdrop
document.addEventListener('click', function(e) {
  var ucp = document.getElementById('ucp-overlay');
  var acp = document.getElementById('acp-overlay');
  if (ucp && ucp.classList.contains('open') && e.target === ucp) closeUCP();
  if (acp && acp.classList.contains('open') && e.target === acp) closeACP();
});
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') { closeUCP(); closeACP(); }
});

/* ── UCP pane switching ── */
function ucpPane(id) {
  document.querySelectorAll('#ucp-overlay .cp-pane').forEach(function(p){ p.classList.remove('active'); });
  var t = document.getElementById(id);
  if (t) t.classList.add('active');
  document.querySelectorAll('#ucp-nav .cp-nav-item').forEach(function(n){ n.classList.remove('active'); });
  var nav = document.querySelector('#ucp-nav .cp-nav-item[onclick*="' + id + '"]');
  if (nav) nav.classList.add('active');
}

/* ── ACP pane switching ── */
function acpPane(id) {
  document.querySelectorAll('#acp-overlay .cp-pane').forEach(function(p){ p.classList.remove('active'); });
  var t = document.getElementById(id);
  if (t) t.classList.add('active');
  document.querySelectorAll('#acp-nav .cp-nav-item').forEach(function(n){ n.classList.remove('active'); });
  var nav = document.querySelector('#acp-nav .cp-nav-item[onclick*="' + id + '"]');
  if (nav) nav.classList.add('active');
}

/* ── UCP Avatar ── */
var _ucpAvatarPending = '';

function ucpSyncAvatar() {
  var profAv = document.getElementById('prof-avatar-el');
  var preview = document.getElementById('ucp-av-preview');
  if (!profAv || !preview) return;
  var img = profAv.querySelector('.profile-avatar-img');
  if (img) {
    preview.innerHTML = '';
    var clone = document.createElement('img');
    clone.src = img.src;
    clone.style.cssText = 'width:100%;height:100%;object-fit:cover;';
    preview.appendChild(clone);
    _ucpAvatarPending = img.src;
  } else {
    var txt = '';
    profAv.childNodes.forEach(function(n){ if(n.nodeType===3) txt += n.textContent.trim(); });
    preview.textContent = txt || 'iD';
    preview.style.color = profAv.style.color || 'var(--orange)';
    _ucpAvatarPending = '';
  }
}

function ucpAvatarFile(input) {
  var file = input.files[0];
  if (!file) return;
  var reader = new FileReader();
  reader.onload = function(e) {
    _ucpAvatarPending = e.target.result;
    var preview = document.getElementById('ucp-av-preview');
    if (preview) {
      preview.innerHTML = '';
      var img = document.createElement('img');
      img.src = e.target.result;
      img.style.cssText = 'width:100%;height:100%;object-fit:cover;';
      preview.appendChild(img);
    }
  };
  reader.readAsDataURL(file);
}

function ucpAvatarUrlPreview(url) {
  if (!url.trim()) return;
  _ucpAvatarPending = url.trim();
  var preview = document.getElementById('ucp-av-preview');
  if (!preview) return;
  preview.innerHTML = '';
  var img = document.createElement('img');
  img.src = url.trim();
  img.style.cssText = 'width:100%;height:100%;object-fit:cover;';
  img.onerror = function() { this.style.opacity = '0'; };
  preview.appendChild(img);
}

function ucpApplyAvatar() {
  if (!_ucpAvatarPending) { showToast('warning','No Image','Upload or paste a URL first.'); return; }
  var profAv = document.getElementById('prof-avatar-el');
  if (profAv) {
    var ex = profAv.querySelector('.profile-avatar-img');
    if (ex) ex.remove();
    var img = document.createElement('img');
    img.className = 'profile-avatar-img';
    img.src = _ucpAvatarPending;
    profAv.appendChild(img);
  }
  showToast('success','Avatar Updated','Profile picture has been changed.');
}

function ucpResetAvatar() {
  var profAv = document.getElementById('prof-avatar-el');
  if (profAv) { var ex = profAv.querySelector('.profile-avatar-img'); if (ex) ex.remove(); }
  var preview = document.getElementById('ucp-av-preview');
  if (preview) { preview.innerHTML = 'iD'; preview.style.color = 'var(--orange)'; }
  _ucpAvatarPending = '';
  showToast('info','Avatar Reset','Profile picture removed.');
}

/* ── UCP Banner ── */
var BG_PRESETS_UCP = [
  { label:'Default', value:'linear-gradient(135deg,#0d0d14 0%,#12121e 50%,#0a0a12 100%)' },
  { label:'Cyber',   value:'linear-gradient(135deg,#0a0014 0%,#1a0030 40%,#000a1a 100%)' },
  { label:'Fire',    value:'linear-gradient(135deg,#1a0500 0%,#2a0800 50%,#0a0300 100%)' },
  { label:'Ocean',   value:'linear-gradient(135deg,#00060d 0%,#001a26 50%,#000810 100%)' },
  { label:'Forest',  value:'linear-gradient(135deg,#010a01 0%,#061a06 50%,#020e02 100%)' },
  { label:'Dusk',    value:'linear-gradient(135deg,#0d0010 0%,#1a0028 40%,#0a000d 100%)' },
  { label:'Steel',   value:'linear-gradient(135deg,#060810 0%,#101420 50%,#080a14 100%)' },
  { label:'Gold',    value:'linear-gradient(135deg,#100800 0%,#1e1000 50%,#0a0600 100%)' },
  { label:'Pink',    value:'linear-gradient(135deg,#10000a 0%,#220010 50%,#0a0008 100%)' },
  { label:'Ice',     value:'linear-gradient(135deg,#00080e 0%,#001a20 50%,#000608 100%)' },
  { label:'Ember',   value:'linear-gradient(135deg,#1a0800,#300e00,#1a0500)' },
  { label:'Void',    value:'linear-gradient(135deg,#050505,#0a0a0a,#030303)' },
];
var _ucpBannerActive = 0;
var _ucpBannerPending = BG_PRESETS_UCP[0].value;

function ucpInitBannerPresets() {
  var grid = document.getElementById('ucp-banner-presets');
  if (!grid || grid.children.length > 0) return;
  BG_PRESETS_UCP.forEach(function(p, i) {
    var el = document.createElement('div');
    el.className = 'cp-banner-preset' + (i === _ucpBannerActive ? ' active' : '');
    el.style.background = p.value;
    el.title = p.label;
    el.onclick = function() {
      _ucpBannerActive = i;
      _ucpBannerPending = p.value;
      grid.querySelectorAll('.cp-banner-preset').forEach(function(x){ x.classList.remove('active'); });
      el.classList.add('active');
      var prev = document.getElementById('ucp-banner-preview');
      if (prev) { prev.style.background = p.value; prev.style.backgroundImage = ''; }
    };
    grid.appendChild(el);
  });
  // sync preview with current banner
  var bannerImg = document.getElementById('prof-banner-img');
  var prev = document.getElementById('ucp-banner-preview');
  if (bannerImg && prev) {
    if (bannerImg.style.backgroundImage && bannerImg.style.backgroundImage !== 'none' && bannerImg.style.backgroundImage !== '') {
      prev.style.backgroundImage = bannerImg.style.backgroundImage;
      prev.style.backgroundSize = 'cover';
      prev.style.backgroundPosition = 'center';
    } else {
      prev.style.background = bannerImg.style.background || BG_PRESETS_UCP[0].value;
    }
  }
}

function ucpBannerFile(input) {
  var file = input.files[0];
  if (!file) return;
  var reader = new FileReader();
  reader.onload = function(e) {
    _ucpBannerPending = 'url:' + e.target.result;
    var prev = document.getElementById('ucp-banner-preview');
    if (prev) {
      prev.style.backgroundImage = 'url(' + e.target.result + ')';
      prev.style.backgroundSize = 'cover'; prev.style.backgroundPosition = 'center';
      prev.style.background = '';
    }
    showToast('info','Banner Loaded','Click Apply to set as your banner.');
  };
  reader.readAsDataURL(file);
}

function ucpApplyBanner() {
  var urlInput = document.getElementById('ucp-banner-url');
  var bannerImg = document.getElementById('prof-banner-img');
  if (!bannerImg) return;
  // Check if there's a URL input
  if (urlInput && urlInput.value.trim()) {
    var url = urlInput.value.trim();
    bannerImg.style.backgroundImage = 'url(' + url + ')';
    bannerImg.style.backgroundSize = 'cover';
    bannerImg.style.backgroundPosition = 'center';
    bannerImg.style.background = '';
    showToast('success','Banner Updated','Profile banner set to custom image.');
    return;
  }
  if (_ucpBannerPending.startsWith('url:')) {
    var dataUrl = _ucpBannerPending.slice(4);
    bannerImg.style.backgroundImage = 'url(' + dataUrl + ')';
    bannerImg.style.backgroundSize = 'cover';
    bannerImg.style.backgroundPosition = 'center';
    bannerImg.style.background = '';
  } else {
    bannerImg.style.background = _ucpBannerPending;
    bannerImg.style.backgroundImage = '';
    bannerImg.style.backgroundSize = 'cover';
  }
  showToast('success','Banner Updated','Profile banner has been changed.');
}

function ucpResetBanner() {
  var bannerImg = document.getElementById('prof-banner-img');
  if (bannerImg) {
    bannerImg.style.background = 'linear-gradient(135deg,#0d0d14 0%,#12121e 50%,#0a0a12 100%)';
    bannerImg.style.backgroundImage = '';
  }
  var prev = document.getElementById('ucp-banner-preview');
  if (prev) { prev.style.background = 'linear-gradient(135deg,#0d0d14,#12121e)'; prev.style.backgroundImage = ''; }
  _ucpBannerActive = 0;
  _ucpBannerPending = BG_PRESETS_UCP[0].value;
  showToast('info','Banner Reset','Banner restored to default.');
}

/* ── UCP Save handlers ── */
function ucpSaveProfile() {
  var name = document.getElementById('ucp-displayname') ? document.getElementById('ucp-displayname').value : '';
  if (name) {
    var pname = document.querySelector('#v-profile .profile-name');
    if (pname) pname.innerHTML = name + ' <i class="fas fa-circle-check verified-icon"></i>';
    var bc = document.getElementById('profile-breadcrumb-name');
    if (bc) bc.textContent = name;
  }
  var title = document.getElementById('ucp-title') ? document.getElementById('ucp-title').value : '';
  if (title) {
    var ptitle = document.querySelector('#v-profile .profile-title');
    if (ptitle) ptitle.textContent = '// ' + title;
  }
  showToast('success','Profile Saved','Your profile info has been updated.');
}

function ucpSaveSocials() { showToast('success','Socials Saved','Social links updated.'); }
function ucpSaveSig() {
  var sig = document.getElementById('ucp-sig-text') ? document.getElementById('ucp-sig-text').value : '';
  var prev = document.getElementById('ucp-sig-preview');
  if (prev && sig) prev.textContent = sig;
  var sigBox = document.querySelector('#v-profile .sig-box');
  if (sigBox && sig) sigBox.textContent = sig;
  showToast('success','Signature Saved','Forum signature updated.');
}
function ucpSaveAccount() { showToast('success','Account Saved','Account settings updated.'); }
function ucpChangePassword() {
  var old = document.getElementById('ucp-pw-old') ? document.getElementById('ucp-pw-old').value : '';
  var nw = document.getElementById('ucp-pw-new') ? document.getElementById('ucp-pw-new').value : '';
  var cf = document.getElementById('ucp-pw-confirm') ? document.getElementById('ucp-pw-confirm').value : '';
  if (!old) { showToast('warning','Missing','Enter your current password.'); return; }
  if (!nw || nw.length < 6) { showToast('warning','Too Short','New password must be 6+ characters.'); return; }
  if (nw !== cf) { showToast('error','Mismatch','New passwords do not match.'); return; }
  showToast('success','Password Changed','Your password has been updated.');
  document.getElementById('ucp-pw-old').value = '';
  document.getElementById('ucp-pw-new').value = '';
  document.getElementById('ucp-pw-confirm').value = '';
}
function ucpSavePrivacy() { showToast('success','Privacy Saved','Privacy settings updated.'); }
function ucpSaveNotifs() { showToast('success','Notifications Saved','Notification preferences updated.'); }

/* ── Signature live preview ── */
var ucpSigTa = document.getElementById('ucp-sig-text');
if (ucpSigTa) {
  ucpSigTa.addEventListener('input', function() {
    var prev = document.getElementById('ucp-sig-preview');
    if (prev) prev.textContent = ucpSigTa.value;
  });
}

/* ── ACP Save handlers ── */
// ── ACP — Real API-wired functions ──────────────────────────

function _acpPost(action, data, onOk, btnEl) {
  var fd = new FormData();
  fd.append('action', action);
  Object.keys(data).forEach(function(k){ if (data[k] !== undefined && data[k] !== null) fd.append(k, data[k]); });
  if (btnEl) { btnEl.disabled = true; var orig = btnEl.textContent; btnEl.textContent = '...'; }
  fetch('/api/admin.php?action=' + action, { method:'POST', body:fd })
    .then(function(r){ return r.json(); })
    .then(function(d){
      if (btnEl) { btnEl.disabled = false; btnEl.textContent = orig; }
      if (d.success) { onOk(d); }
      else { showToast('error','Error', d.error || 'Request failed'); }
    })
    .catch(function(){
      if (btnEl) { btnEl.disabled = false; btnEl.textContent = orig; }
      showToast('error','Error','Connection failed');
    });
}

function acpSaveSettings() {
  var fields = {
    site_name:         document.getElementById('acp-sitename')    ? document.getElementById('acp-sitename').value    : null,
    contact_email:     document.getElementById('acp-contact-email') ? document.getElementById('acp-contact-email').value : null,
    member_sign_limit: document.getElementById('acp-sign-limit')  ? document.getElementById('acp-sign-limit').value  : null,
    vip_sign_limit:    document.getElementById('acp-sign-limit-vip') ? document.getElementById('acp-sign-limit-vip').value : null,
    max_ipa_size_mb:   document.getElementById('acp-ipa-maxsize') ? document.getElementById('acp-ipa-maxsize').value : null,
    vip_price_usd:     document.getElementById('acp-vip-price')   ? document.getElementById('acp-vip-price').value   : null,
  };
  _acpPost('save_settings', fields, function(){ showToast('success','Settings Saved','Site settings updated.'); });
}

function acpSaveFlags() { showToast('success','Flags Saved','Feature flags updated.'); }

function acpPostAnnouncement() {
  var title = document.getElementById('acp-ann-title') ? document.getElementById('acp-ann-title').value.trim() : '';
  var body  = document.getElementById('acp-ann-body')  ? document.getElementById('acp-ann-body').value.trim()  : '';
  var type  = document.getElementById('acp-ann-type')  ? document.getElementById('acp-ann-type').value         : 'info';
  if (!title) { showToast('warning','Missing','Enter an announcement title.'); return; }
  if (!body)  { showToast('warning','Missing','Enter announcement body.');     return; }
  _acpPost('announcement', { title:title, body:body, type:type }, function(){
    showToast('success','Announcement Posted','Your announcement has been published.');
    document.getElementById('acp-ann-title').value = '';
    document.getElementById('acp-ann-body').value  = '';
  });
}

function acpSearchUser() {
  var q = document.getElementById('acp-user-search') ? document.getElementById('acp-user-search').value.trim() : '';
  if (!q) { showToast('warning','Empty','Enter a username to search.'); return; }
  fetch('/api/admin.php?action=users&q=' + encodeURIComponent(q))
    .then(function(r){ return r.json(); })
    .then(function(d){
      if (!d.success) { showToast('error','Error', d.error); return; }
      var tbody = document.querySelector('#acp-users .acp-table tbody');
      if (!tbody) return;
      tbody.innerHTML = '';
      if (d.users.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" style="color:var(--dim);text-align:center;">No users found</td></tr>';
        return;
      }
      d.users.forEach(function(u){
        var tr = document.createElement('tr');
        tr.innerHTML = '<td><strong>' + u.username + '</strong></td>' +
          '<td class="acp-td-meta">' + u.email + '</td>' +
          '<td><span class="acp-user-role" style="background:rgba(255,136,0,.15);color:#ff8800;">' + u.group_name + '</span></td>' +
          '<td class="acp-td-meta">' + (u.sign_count_total||0) + '</td>' +
          '<td class="acp-td-meta">' + (u.post_count||0) + '</td>' +
          '<td class="acp-td-meta">' + (u.last_login ? u.last_login.split('T')[0] : 'Never') + '</td>' +
          '<td><button class="acp-user-btn" onclick="acpEditUser(\'' + u.username + '\',' + u.id + ')">Edit</button> ' +
          '<button class="acp-user-btn ban" onclick="acpBanUser(\'' + u.username + '\',' + u.id + ')">Ban</button></td>';
        tbody.appendChild(tr);
      });
    });
}

var _acpEditingUserId = null;
function acpEditUser(username, userId) {
  _acpEditingUserId = userId || null;
  var card = document.getElementById('acp-user-edit-card');
  if (!card) { showToast('info','Edit User','Opening editor for ' + username); return; }
  document.getElementById('acp-edit-username').textContent = username;
  document.getElementById('acp-edit-uname').value = username;
  document.getElementById('acp-edit-email').value = '';
  document.getElementById('acp-edit-note').value  = '';
  card.style.display = 'block';
  card.scrollIntoView({ behavior:'smooth', block:'start' });
}

function acpSaveUser() {
  var uname    = document.getElementById('acp-edit-uname')   ? document.getElementById('acp-edit-uname').value   : '';
  var email    = document.getElementById('acp-edit-email')   ? document.getElementById('acp-edit-email').value   : '';
  var role     = document.getElementById('acp-edit-role')    ? document.getElementById('acp-edit-role').value    : '';
  var note     = document.getElementById('acp-edit-note')    ? document.getElementById('acp-edit-note').value    : '';
  var pwreset  = document.getElementById('acp-edit-pwreset') ? document.getElementById('acp-edit-pwreset').value : '';
  if (!uname) { showToast('warning','Missing','Enter a username.'); return; }
  _acpPost('edit_user', { user_id:_acpEditingUserId, username:uname, email:email, group_id:role, note:note, pw_reset:pwreset }, function(){
    showToast('success','User Saved','Changes saved for ' + uname + '.');
    document.getElementById('acp-user-edit-card').style.display = 'none';
  });
}

function acpBanUser(username, userId) {
  if (!confirm('Ban ' + username + '?')) return;
  _acpPost('ban_user', { user_id:userId, ban_type:'permanent', reason:'Banned via ACP quick-ban' }, function(){
    showToast('warning','User Banned', username + ' has been banned.');
  });
}

function acpIssueBan() {
  var user   = document.getElementById('acp-ban-user')   ? document.getElementById('acp-ban-user').value.trim()   : '';
  var reason = document.getElementById('acp-ban-reason') ? document.getElementById('acp-ban-reason').value.trim() : '';
  var type   = document.getElementById('acp-ban-type')   ? document.getElementById('acp-ban-type').value           : 'permanent';
  if (!user)   { showToast('warning','Missing','Enter a username.'); return; }
  if (!reason) { showToast('warning','Missing','Enter a ban reason.'); return; }
  // Lookup user id then ban
  fetch('/api/admin.php?action=users&q=' + encodeURIComponent(user))
    .then(function(r){ return r.json(); })
    .then(function(d){
      var found = d.users && d.users.find(function(u){ return u.username.toLowerCase() === user.toLowerCase(); });
      if (!found) { showToast('error','Not Found','User ' + user + ' not found.'); return; }
      _acpPost('ban_user', { user_id:found.id, ban_type:type, reason:reason }, function(){
        showToast('success','Ban Issued', user + ' has been banned.');
        document.getElementById('acp-ban-user').value   = '';
        document.getElementById('acp-ban-reason').value = '';
      });
    });
}

function acpGenInvite() {
  var role  = document.getElementById('acp-inv-role')  ? document.getElementById('acp-inv-role').value  : '6';
  var uses  = document.getElementById('acp-inv-uses')  ? document.getElementById('acp-inv-uses').value  : '1';
  var note  = document.getElementById('acp-inv-note')  ? document.getElementById('acp-inv-note').value  : '';
  var exp   = document.getElementById('acp-inv-exp')   ? document.getElementById('acp-inv-exp').value   : '';
  _acpPost('create_invite', { role_id:role, max_uses:uses, note:note, expires_at:exp }, function(d){
    var el = document.getElementById('acp-inv-result');
    if (el) { el.style.display='block'; el.textContent = d.code; }
    showToast('success','Invite Created', d.code);
  });
}

function acpGrantVIP() {
  var user = document.getElementById('acp-vip-grant-user') ? document.getElementById('acp-vip-grant-user').value.trim() : '';
  if (!user) { showToast('warning','Missing','Enter a username.'); return; }
  _acpPost('grant_vip', { username:user }, function(d){
    showToast('success','VIP Granted', d.message);
    document.getElementById('acp-vip-grant-user').value = '';
  });
}

// ACP IPA queue — load real pending apps from API
function acpLoadIPAQueue() {
  acpLoadLiveApps();
  fetch('/api/admin.php?action=pending_apps')
    .then(function(r){ return r.json(); })
    .then(function(d){
      if (!d.success) return;
      var tbody = document.getElementById('acp-queue-tbody');
      if (!tbody) return;
      tbody.innerHTML = '';
      if (d.apps.length === 0) {
        tbody.innerHTML = '<tr><td colspan="6" style="color:var(--dim);text-align:center;padding:16px;">No pending submissions</td></tr>';
        var badge = document.getElementById('acp-queue-count');
        if (badge) badge.textContent = '0 pending';
        return;
      }
      var badge = document.getElementById('acp-queue-count');
      if (badge) badge.textContent = d.apps.length + ' pending';
      d.apps.forEach(function(a){
        var tr = document.createElement('tr');
        var sizeFmt = a.size_bytes ? (Math.round(a.size_bytes/1048576)) + ' MB' : '—';
        tr.innerHTML = '<td>' + a.name + '</td>' +
          '<td class="acp-td-meta">' + (a.submitted_by_name||'unknown') + '</td>' +
          '<td class="acp-td-meta">' + a.version + '</td>' +
          '<td class="acp-td-meta">' + sizeFmt + '</td>' +
          '<td><span style="color:var(--yellow);font-size:10px;font-family:\'Oswald\',sans-serif;">PENDING</span></td>' +
          '<td>' +
            '<button class="acp-user-btn" onclick="acpApproveApp(' + a.id + ',this)">Approve</button> ' +
            '<button class="acp-user-btn" onclick="acpFeatureApp(' + a.id + ',this)" style="background:rgba(255,204,0,.1);color:var(--yellow);">★ Feature</button> ' +
            '<button class="acp-user-btn ban" onclick="acpRejectApp(' + a.id + ',this)">Reject</button>' +
          '</td>';
        tbody.appendChild(tr);
      });
    });
}

function acpApproveApp(appId, btn) {
  _acpPost('approve_app', { app_id:appId, is_featured:0 }, function(){
    showToast('success','Approved','IPA is now live.');
    btn.closest('tr').remove();
    acpLoadIPAQueue();
  }, btn);
}

function acpFeatureApp(appId, btn) {
  _acpPost('approve_app', { app_id:appId, is_featured:1 }, function(){
    showToast('success','Featured','IPA approved and marked as Staff Pick.');
    btn.closest('tr').remove();
    acpLoadIPAQueue();
  }, btn);
}

function acpRejectApp(appId, btn) {
  var reason = prompt('Rejection reason (optional):') || '';
  _acpPost('reject_app', { app_id:appId, reason:reason }, function(){
    showToast('warning','Rejected','IPA has been rejected.');
    btn.closest('tr').remove();
    acpLoadIPAQueue();
  }, btn);
}

// ACP Reports — load real reports from API
function acpLoadReports() {
  fetch('/api/admin.php?action=reports&status=open')
    .then(function(r){ return r.json(); })
    .then(function(d){
      if (!d.success) return;
      var tbody = document.querySelector('#acp-reports .acp-table tbody');
      if (!tbody) return;
      tbody.innerHTML = '';
      if (d.reports.length === 0) {
        tbody.innerHTML = '<tr><td colspan="5" style="color:var(--dim);text-align:center;padding:16px;">No open reports</td></tr>';
        return;
      }
      d.reports.forEach(function(r){
        var tr = document.createElement('tr');
        tr.innerHTML = '<td>' + r.reason + (r.detail ? ' — ' + r.detail.substring(0,40) : '') + '</td>' +
          '<td class="acp-td-meta">' + r.target_type + ' #' + r.target_id + '</td>' +
          '<td class="acp-td-meta">' + r.reporter_name + '</td>' +
          '<td class="acp-td-meta">' + r.created_at.split(' ')[0] + '</td>' +
          '<td><button class="acp-user-btn" onclick="acpResolveReport(' + r.id + ',this)">Resolve</button></td>';
        tbody.appendChild(tr);
      });
    });
}

function acpResolveReport(reportId, btn) {
  _acpPost('resolve_report', { report_id:reportId }, function(){
    showToast('success','Resolved','Report marked as resolved.');
    btn.closest('tr').remove();
  }, btn);
}

// Auto-load ACP data when pane opens
var _acpOrigPane = acpPane;
acpPane = function(id) {
  _acpOrigPane(id);
  if (id === 'acp-ipas')    setTimeout(acpLoadIPAQueue, 100);
  if (id === 'acp-reports') setTimeout(acpLoadReports, 100);
};

// ACP direct admin IPA upload
function acpIPAFileSelected(input) {
  var file = input.files[0];
  if (!file) return;
  var parsed = document.getElementById('acp-ipa-parsed');
  var nameEl  = document.getElementById('acp-ipa-parsed-name');
  var bundleEl= document.getElementById('acp-ipa-parsed-bundle');
  var sizeEl  = document.getElementById('acp-ipa-parsed-size');
  var mb = (file.size / 1048576).toFixed(1);
  var guessName = file.name.replace(/\.ipa$/i,'').replace(/[-_]/g,' ');
  if (nameEl)  nameEl.textContent  = guessName;
  if (bundleEl) bundleEl.textContent = '';
  if (sizeEl)  sizeEl.textContent  = mb + ' MB';
  if (parsed)  parsed.style.display = 'block';
  // Auto-fill name field if empty
  var nameInput = document.getElementById('acp-upload-name');
  if (nameInput && !nameInput.value) nameInput.value = guessName;
}

function acpUploadIPA(btn) {
  var file    = document.getElementById('acp-ipa-file')     ? document.getElementById('acp-ipa-file').files[0]       : null;
  var name    = document.getElementById('acp-upload-name')    ? document.getElementById('acp-upload-name').value.trim()    : '';
  var bundle  = document.getElementById('acp-upload-bundle')  ? document.getElementById('acp-upload-bundle').value.trim()  : '';
  var version = document.getElementById('acp-upload-version') ? document.getElementById('acp-upload-version').value.trim() : '';
  var minios  = document.getElementById('acp-upload-minios')  ? document.getElementById('acp-upload-minios').value.trim()  : '';
  var maxios  = document.getElementById('acp-upload-maxios')  ? document.getElementById('acp-upload-maxios').value.trim()  : '';
  var cat     = document.getElementById('acp-upload-cat')     ? document.getElementById('acp-upload-cat').value            : 'other';
  var desc    = document.getElementById('acp-upload-desc')    ? document.getElementById('acp-upload-desc').value.trim()    : '';
  var cl      = document.getElementById('acp-upload-changelog')? document.getElementById('acp-upload-changelog').value.trim(): '';
  var icon    = document.getElementById('acp-upload-icon')    ? document.getElementById('acp-upload-icon').value.trim()    : '';
  var featured= document.getElementById('acp-upload-featured') ? (document.getElementById('acp-upload-featured').checked ? '1' : '0') : '0';

  if (!file)    { showToast('warning','Missing','Select an IPA file.'); return; }
  if (!name)    { showToast('warning','Missing','Enter the app name.'); return; }
  if (!bundle)  { showToast('warning','Missing','Enter the bundle ID.'); return; }
  if (!version) { showToast('warning','Missing','Enter the version.'); return; }

  var fd = new FormData();
  fd.append('action',      'submit');
  fd.append('ipa',         file);
  fd.append('name',        name);
  fd.append('bundle_id',   bundle);
  fd.append('version',     version);
  fd.append('min_ios',     minios);
  fd.append('max_ios',     maxios);
  fd.append('category',    cat);
  fd.append('description', desc);
  fd.append('changelog',   cl);
  fd.append('icon_url',    icon);

  var prog   = document.getElementById('acp-upload-progress');
  var bar    = document.getElementById('acp-upload-bar');
  var status = document.getElementById('acp-upload-status');
  if (prog) prog.style.display = 'block';
  if (bar)  bar.style.width    = '30%';
  if (status) status.textContent = 'Uploading IPA...';
  btn.disabled = true;

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/apps.php?action=submit');
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable && bar) {
      bar.style.width = Math.round((e.loaded / e.total) * 80) + '%';
    }
  };
  xhr.onload = function() {
    btn.disabled = false;
    var d;
    try { d = JSON.parse(xhr.responseText); } catch(e) { d = { success:false, error:'Invalid response' }; }
    if (d.success) {
      // If admin, auto-approve it
      if (bar)    bar.style.width = '100%';
      if (status) status.textContent = 'Approving...';
      var fd2 = new FormData();
      fd2.append('app_id',      d.app_id);
      fd2.append('is_featured', featured);
      fetch('/api/admin.php?action=approve_app', { method:'POST', body:fd2 })
        .then(function(r){ return r.json(); })
        .then(function(a){
          if (prog) prog.style.display = 'none';
          if (a.success) {
            showToast('success','IPA Published', name + ' is now live in the library.');
            // Reset form
            ['acp-ipa-file','acp-upload-name','acp-upload-bundle','acp-upload-version',
             'acp-upload-minios','acp-upload-maxios','acp-upload-desc','acp-upload-changelog','acp-upload-icon']
            .forEach(function(id){ var el=document.getElementById(id); if(el) el.value=''; });
            document.getElementById('acp-ipa-parsed').style.display = 'none';
            document.getElementById('acp-upload-featured').checked  = false;
            acpLoadIPAQueue();
          } else {
            showToast('error','Approve Failed', a.error || 'Auto-approve failed — check queue');
          }
        });
    } else {
      if (prog) prog.style.display = 'none';
      showToast('error','Upload Failed', d.error || 'Unknown error');
    }
  };
  xhr.onerror = function() {
    btn.disabled = false;
    if (prog) prog.style.display = 'none';
    showToast('error','Error','Upload failed — connection error');
  };
  xhr.send(fd);
}

// Load live self-hosted apps into ACP table
function acpLoadLiveApps() {
  fetch('/api/apps.php?action=list&limit=50')
    .then(function(r){ return r.json(); })
    .then(function(d){
      var tbody = document.getElementById('acp-live-tbody');
      var count = document.getElementById('acp-live-count');
      if (!tbody) return;
      if (!d.success || !d.apps.length) {
        tbody.innerHTML = '<tr><td colspan="6" style="color:var(--dim);text-align:center;padding:16px;">No self-hosted apps yet</td></tr>';
        return;
      }
      if (count) count.textContent = d.apps.length + ' published';
      tbody.innerHTML = '';
      d.apps.forEach(function(a){
        var tr = document.createElement('tr');
        tr.innerHTML = '<td><strong>' + a.name + '</strong></td>' +
          '<td class="acp-td-meta" style="font-family:\'JetBrains Mono\',monospace;font-size:10px;">' + a.bundle_identifier + '</td>' +
          '<td class="acp-td-meta">' + a.version + '</td>' +
          '<td class="acp-td-meta">' + (a.sign_count||0) + '</td>' +
          '<td class="acp-td-meta">' + (a.is_featured ? '<span style="color:var(--yellow);">★ Pick</span>' : '—') + '</td>' +
          '<td><button class="acp-user-btn ban" onclick="acpRemoveApp(' + a.id + ',this)">Remove</button></td>';
        tbody.appendChild(tr);
      });
    });
}

function acpRemoveApp(appId, btn) {
  if (!confirm('Remove this app from the live library?')) return;
  var fd = new FormData();
  fd.append('app_id', appId);
  fetch('/api/admin.php?action=reject_app', { method:'POST', body:fd })
    .then(function(r){ return r.json(); })
    .then(function(d){
      if (d.success) { showToast('success','Removed','App removed from library.'); btn.closest('tr').remove(); }
      else showToast('error','Error', d.error);
    });
}

/* Rich text editor helpers */
function wrapText(btn, before, after, placeholder) {
  var ta = btn.closest('.reply-toolbar').parentElement.querySelector('textarea');
  if (!ta) return;
  var start = ta.selectionStart, end = ta.selectionEnd;
  var sel = ta.value.substring(start, end) || placeholder;
  ta.value = ta.value.substring(0,start) + before + sel + after + ta.value.substring(end);
  ta.selectionStart = start + before.length;
  ta.selectionEnd = start + before.length + sel.length;
  ta.focus();
}
function insertEmoji(btn) {
  var emojis = ['😄','🔥','💯','✅','⚡','🎯','🍎','💉','🛡️','👍','🤙','🚀'];
  var emoji = emojis[Math.floor(Math.random() * emojis.length)];
  var ta = btn.closest('.reply-toolbar').parentElement.querySelector('textarea');
  if (!ta) return;
  var pos = ta.selectionStart;
  ta.value = ta.value.substring(0,pos) + emoji + ta.value.substring(pos);
  ta.selectionStart = ta.selectionEnd = pos + emoji.length;
  ta.focus();
}

/* ── IPA Submit Page Logic ── */
var _currentSSSlot = 0;
var _ssImages = [null,null,null,null,null,null];
var _ipaFileLoaded = false;

function handleIPADrop(e) {
  e.preventDefault();
  document.getElementById('ipa-dropzone').classList.remove('drag-over');
  var f = e.dataTransfer.files[0];
  if (f) processIPAFile(f);
}
function handleIPASelect(inp) {
  if (inp.files[0]) processIPAFile(inp.files[0]);
}
function processIPAFile(file) {
  var dropzone = document.getElementById('ipa-dropzone');
  var progress = document.getElementById('upload-progress');
  var status = document.getElementById('ipa-file-status');
  dropzone.style.display = 'none';
  progress.style.display = 'block';
  document.getElementById('up-filename').textContent = file.name;
  var sizeMB = (file.size / 1048576).toFixed(1);
  document.getElementById('up-filesize').textContent = sizeMB + ' MB';
  status.textContent = file.name;
  // Simulate analysis progress
  var bar = document.getElementById('up-bar');
  var pct = document.getElementById('up-pct');
  var upStatus = document.getElementById('up-status');
  var steps = [
    {w:'20%', s:'Extracting Info.plist...', p:'20%'},
    {w:'45%', s:'Scanning dylibs...', p:'45%'},
    {w:'70%', s:'Validating binary...', p:'70%'},
    {w:'90%', s:'Checking entitlements...', p:'90%'},
    {w:'100%', s:'Analysis complete ✓', p:'100%'}
  ];
  var i = 0;
  function step() {
    if (i >= steps.length) {
      // Show parsed info
      var parsed = document.getElementById('ipa-parsed-info');
      var appname = file.name.replace('.ipa','').replace(/[_-]/g,' ');
      document.getElementById('parsed-name').textContent = appname;
      document.getElementById('parsed-bundle').textContent = 'com.example.' + appname.toLowerCase().replace(/\s+/g,'');
      document.getElementById('parsed-ver').textContent = 'v1.0.0';
      document.getElementById('parsed-ios').textContent = 'iOS 14.0+';
      document.getElementById('parsed-arch').textContent = 'arm64';
      document.getElementById('parsed-size').textContent = sizeMB + ' MB';
      parsed.style.display = 'block';
      _ipaFileLoaded = true;
      updateChecklist();
      return;
    }
    bar.style.width = steps[i].w;
    pct.textContent = steps[i].p;
    upStatus.textContent = steps[i].s;
    i++;
    setTimeout(step, 400);
  }
  setTimeout(step, 200);
}
function clearIPAFile() {
  document.getElementById('ipa-dropzone').style.display = 'block';
  document.getElementById('upload-progress').style.display = 'none';
  document.getElementById('ipa-parsed-info').style.display = 'none';
  document.getElementById('up-bar').style.width = '0';
  document.getElementById('ipa-file-status').textContent = 'No file selected';
  document.getElementById('ipa-file-input').value = '';
  _ipaFileLoaded = false;
  updateChecklist();
}
function triggerSSUpload(slot) {
  _currentSSSlot = slot;
  document.getElementById('ss-file-input').click();
}
function handleSSUpload(inp) {
  var slot = _currentSSSlot;
  var file = inp.files[0];
  if (!file) return;
  var reader = new FileReader();
  reader.onload = function(e) {
    _ssImages[slot] = e.target.result;
    var slots = document.querySelectorAll('#ss-upload-grid .ss-upload-slot');
    if (slots[slot]) {
      slots[slot].innerHTML = '<img src="'+e.target.result+'" style="width:100%;height:100%;object-fit:cover;border-radius:5px;"><div style="position:absolute;top:4px;right:4px;background:rgba(0,0,0,0.7);border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:10px;color:#fff;" onclick="removeSSSlot('+slot+',event)">✕</div>';
      slots[slot].style.position = 'relative';
      slots[slot].style.padding = '0';
      slots[slot].style.overflow = 'hidden';
      slots[slot].classList.add('filled');
    }
    inp.value = '';
    updateChecklist();
  };
  reader.readAsDataURL(file);
}
function removeSSSlot(slot, e) {
  e.stopPropagation();
  _ssImages[slot] = null;
  var slots = document.querySelectorAll('#ss-upload-grid .ss-upload-slot');
  if (slots[slot]) {
    slots[slot].innerHTML = '<i class="fas fa-plus" style="font-size:16px;"></i><span>Screenshot '+(slot+1)+'</span>';
    slots[slot].style.position = '';
    slots[slot].style.padding = '';
    slots[slot].classList.remove('filled');
  }
  updateChecklist();
}
function addDylibRow() {
  var row = document.createElement('div');
  row.className = 'dylib-inject-row';
  row.innerHTML = '<input class="cp-input dylib-tag" placeholder="Library.dylib" style="flex:1;background:rgba(0,204,255,0.05);border-color:rgba(0,204,255,0.2);font-family:\'JetBrains Mono\',monospace;font-size:11px;"/><input class="cp-input" placeholder="v1.0.0" style="width:80px;font-family:\'JetBrains Mono\',monospace;font-size:11px;"/><input class="cp-input" placeholder="Purpose" style="flex:2;font-size:11px;"/><button onclick="this.closest(\'.dylib-inject-row\').remove()" style="background:none;border:1px solid var(--border);color:var(--dim);width:28px;height:28px;cursor:pointer;flex-shrink:0;">&minus;</button>';
  document.getElementById('dylib-list').appendChild(row);
}
function updateChecklist() {
  var checks = [
    _ipaFileLoaded,
    (document.getElementById('sub-appname') && document.getElementById('sub-appname').value.trim().length > 0) &&
    (document.getElementById('sub-ver') && document.getElementById('sub-ver').value.trim().length > 0),
    document.getElementById('sub-cat') && document.getElementById('sub-cat').value !== '',
    document.getElementById('sub-desc') && document.getElementById('sub-desc').value.trim().length > 10,
    _ssImages.some(function(s){ return s !== null; }),
    (document.getElementById('tos-1') && document.getElementById('tos-1').checked) &&
    (document.getElementById('tos-2') && document.getElementById('tos-2').checked) &&
    (document.getElementById('tos-3') && document.getElementById('tos-3').checked)
  ];
  var done = 0;
  checks.forEach(function(c, i) {
    var dot = document.getElementById('pt-'+(i+1));
    var txt = document.getElementById('pt-'+(i+1)+'t');
    if (!dot || !txt) return;
    if (c) { dot.classList.add('done'); dot.classList.remove('active'); txt.className='pt-text done'; done++; }
    else { dot.classList.remove('done'); dot.classList.add('active'); txt.className='pt-text active'; }
  });
  var pct = Math.round((done/6)*100);
  var bar = document.getElementById('submit-progress-bar');
  var lbl = document.getElementById('submit-pct-label');
  if (bar) bar.style.width = pct+'%';
  if (lbl) lbl.textContent = done+' / 6 complete';
}
function submitIPA() {
  var name = document.getElementById('sub-appname') ? document.getElementById('sub-appname').value.trim() : '';
  if (!_ipaFileLoaded) { showToast('warning','Missing','Please upload an IPA file first.'); return; }
  if (!name) { showToast('warning','Missing','Please enter the app name.'); return; }
  if (!document.getElementById('tos-1').checked || !document.getElementById('tos-2').checked || !document.getElementById('tos-3').checked) {
    showToast('warning','Policy','Please accept all policy checkboxes.'); return;
  }
  showToast('success','Submitted!',name+' has been submitted for review.');
  setTimeout(function(){ showPage('pg-apps'); }, 1500);
}
function saveDraft() {
  var name = document.getElementById('sub-appname') ? document.getElementById('sub-appname').value.trim() : 'Untitled';
  showToast('info','Draft Saved', (name||'Draft')+' saved. You can continue later.');
}

// Wire up checklist live updates
document.addEventListener('DOMContentLoaded', function() {
  ['sub-appname','sub-ver','sub-cat','sub-desc','tos-1','tos-2','tos-3'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) el.addEventListener('change', updateChecklist);
    if (el && el.tagName==='INPUT' && el.type!=='checkbox') el.addEventListener('keyup', updateChecklist);
    if (el && el.tagName==='TEXTAREA') el.addEventListener('keyup', updateChecklist);
  });
});

/* ── Screenshot Lightbox ── */
/* ═══════════════════════════════════════════════
   APP DETAIL — DYNAMIC RENDERING ENGINE
   ════════════════════════════════════════════ */
var _currentDetailApp = null;
var _lbUrls = [];
var _lbCurrent = 0;
var _lbScreenshots = [];

/* ── Tweak keyword inference from description ── */
var TWEAK_RULES = [
  { kw:['premium','subscription','sub ','paywall','paid'],   label:'Premium unlocked (no sub)',     icon:'fa-crown',    color:'var(--yellow)' },
  { kw:['no ads','remove ad','ad block','ad-free','no-ad'],  label:'Zero ads — audio & display',    icon:'fa-ban',      color:'var(--orange)' },
  { kw:['unlimited skip','skip limit','skip unlock'],        label:'Unlimited skips',               icon:'fa-forward',  color:'var(--cyan)' },
  { kw:['high quality','lossless','320kbps','very high'],    label:'High quality audio',            icon:'fa-music',    color:'var(--green)' },
  { kw:['offline','download','cache'],                       label:'Offline downloads',             icon:'fa-download', color:'var(--green)' },
  { kw:['lyric','lyrics'],                                   label:'Lyrics enabled',                icon:'fa-align-left',color:'var(--pink)' },
  { kw:['story','stories'],                                  label:'Story download & save',         icon:'fa-images',   color:'var(--pink)' },
  { kw:['watermark'],                                        label:'No watermark',                  icon:'fa-eye-slash',color:'var(--cyan)' },
  { kw:['dark mode','dark theme'],                           label:'Dark mode unlocked',            icon:'fa-moon',     color:'var(--purple)' },
  { kw:['nitro','nitro unlock'],                             label:'Nitro features unlocked',       icon:'fa-bolt',     color:'var(--purple)' },
  { kw:['screen share','screenshare'],                       label:'Screen share enabled',          icon:'fa-desktop',  color:'var(--cyan)' },
  { kw:['carplay'],                                          label:'CarPlay support',               icon:'fa-car',      color:'var(--green)' },
  { kw:['location','gps','spoof'],                           label:'Location spoofing',             icon:'fa-map-pin',  color:'var(--orange)' },
  { kw:['speed','turbo','fast'],                             label:'Speed / turbo mode',            icon:'fa-tachometer-alt',color:'var(--orange)' },
  { kw:['save','export','photo save'],                       label:'Media save / export',           icon:'fa-save',     color:'var(--green)' },
  { kw:['emulate','emulator','rom','retro','game'],          label:'Full game library access',      icon:'fa-gamepad', color:'var(--yellow)' },
  { kw:['tweak','jailbreak','trollstore','bypass'],          label:'Jailbreak bypass active',       icon:'fa-shield-alt',color:'var(--green)' },
  { kw:['call record','record call'],                        label:'Call recording',                icon:'fa-phone',    color:'var(--red)' },
  { kw:['custom theme','theme'],                             label:'Custom themes',                 icon:'fa-palette',  color:'var(--pink)' },
  { kw:['no region','region unlock','region free'],          label:'Region unlocked',               icon:'fa-globe',    color:'var(--cyan)' },
  { kw:['netflix','stream','streaming'],                     label:'Streaming access unlocked',     icon:'fa-play-circle',color:'var(--red)' },
  { kw:['discord','chat'],                                   label:'Enhanced messaging',             icon:'fa-comments', color:'var(--purple)' },
  { kw:['snapchat','snap'],                                  label:'Screenshot without notification',icon:'fa-camera',  color:'var(--yellow)' },
];

/* Dylib name inference rules */
var DYLIB_RULES = [
  { kw:['premium','subscription','paywall'],    name:'PremiumUnlock.dylib',    ver:'v2.1', desc:'Subscription bypass' },
  { kw:['no ads','ad block','remove ad'],       name:'BlockAds.dylib',         ver:'v1.4', desc:'Ad removal' },
  { kw:['unlimited skip','skip limit'],         name:'UnlimitedSkip.dylib',    ver:'v1.1', desc:'Skip limit bypass' },
  { kw:['offline','download cache'],            name:'OfflineCache.dylib',     ver:'v1.0', desc:'Offline downloads' },
  { kw:['lyric','lyrics'],                      name:'LyricsUnlock.dylib',     ver:'v1.2', desc:'Lyrics feature unlock' },
  { kw:['watermark'],                           name:'NoWatermark.dylib',      ver:'v1.0', desc:'Watermark removal' },
  { kw:['nitro','discord'],                     name:'NitroUnlock.dylib',      ver:'v2.0', desc:'Nitro features' },
  { kw:['dark mode','dark theme'],              name:'DarkMode.dylib',         ver:'v1.3', desc:'Dark theme force-enable' },
  { kw:['location','gps','spoof'],              name:'LocationSpoof.dylib',    ver:'v1.1', desc:'GPS spoofing' },
  { kw:['save','export','photo'],               name:'MediaSave.dylib',        ver:'v1.0', desc:'Media export' },
  { kw:['snapchat','snap'],                     name:'SnapSave.dylib',         ver:'v1.2', desc:'Screenshot bypass' },
  { kw:['story','stories'],                     name:'StoryDL.dylib',          ver:'v1.0', desc:'Story downloader' },
  { kw:['emulate','emulator','rom','game'],     name:'GameUnlock.dylib',       ver:'v1.0', desc:'Full library unlock' },
  { kw:['stream','netflix'],                    name:'StreamPass.dylib',       ver:'v1.3', desc:'Paywall bypass' },
  { kw:['call record'],                         name:'CallRecord.dylib',       ver:'v1.0', desc:'Call recording hook' },
  { kw:['speed','turbo'],                       name:'SpeedBoost.dylib',       ver:'v1.0', desc:'Performance unlock' },
];

/* Similar app inference by bundle/name */
var SIMILAR_MAP = [
  { kw:['spotify','music','audio','stream','sound','melodia'],
    apps:[
      { name:'YouTube Music++', icon:'https://cdn.simpleicons.org/youtube/ffffff', bg:'#ff0000', ver:'v7.2.1', signs:'9.3k', key:'ytmusic' },
      { name:'SoundCloud++',    icon:'https://cdn.simpleicons.org/soundcloud/ff3300', bg:'#111', ver:'v2024.3', signs:'3.1k', key:'soundcloud' },
      { name:'Apple Music++',   icon:'https://cdn.simpleicons.org/applemusic/ffffff', bg:'#fc3c44', ver:'v1.4.2', signs:'2.8k', key:'applemusic' },
    ]
  },
  { kw:['instagram','photo','snap','camera','story'],
    apps:[
      { name:'Snapchat++',    icon:'https://cdn.simpleicons.org/snapchat/000000',   bg:'#FFFC00', ver:'v12.85',  signs:'5.7k', key:'snapchat' },
      { name:'TikTok++',      icon:'https://cdn.simpleicons.org/tiktok/ffffff',     bg:'#010101', ver:'v33.2.0', signs:'4.4k', key:'tiktok' },
      { name:'Pinterest++',   icon:'https://cdn.simpleicons.org/pinterest/E60023',  bg:'#111',    ver:'v10.2',   signs:'1.9k', key:'pinterest' },
    ]
  },
  { kw:['discord','chat','message','whatsapp','telegram'],
    apps:[
      { name:'WhatsApp++',    icon:'https://cdn.simpleicons.org/whatsapp/ffffff',   bg:'#25D366', ver:'v24.8',  signs:'3.9k', key:'whatsapp' },
      { name:'Telegram++',    icon:'https://cdn.simpleicons.org/telegram/ffffff',   bg:'#0088cc', ver:'v10.1',  signs:'2.5k', key:'telegram' },
      { name:'Discord++',     icon:'https://cdn.simpleicons.org/discord/5865F2',    bg:'#0d1117', ver:'v222.0', signs:'4.8k', key:'discord' },
    ]
  },
  { kw:['youtube','video','tiktok','netflix','stream','movie','tv'],
    apps:[
      { name:'YouTube Music++',icon:'https://cdn.simpleicons.org/youtube/ffffff',   bg:'#ff0000', ver:'v7.2.1',  signs:'9.3k', key:'ytmusic' },
      { name:'TikTok++',       icon:'https://cdn.simpleicons.org/tiktok/ffffff',    bg:'#010101', ver:'v33.2.0', signs:'4.4k', key:'tiktok' },
      { name:'Twitch++',       icon:'https://cdn.simpleicons.org/twitch/ffffff',    bg:'#6441a5', ver:'v15.3',   signs:'2.1k', key:'twitch' },
    ]
  },
  { kw:['game','gta','emulate','arcade','play'],
    apps:[
      { name:'GTA San Andreas', icon:'https://cdn.simpleicons.org/rockstargames/ff6b00', bg:'#1a1a2e', ver:'v2.11', signs:'5.2k', key:'gta' },
      { name:'Delta Emu+',      icon:'https://cdn.simpleicons.org/nintendo/E4000F',       bg:'#1a1a2e', ver:'v1.6',  signs:'3.8k', key:'delta' },
      { name:'PPSSPP+',         icon:'https://cdn.simpleicons.org/playstation/003087',    bg:'#111',    ver:'v1.17', signs:'1.4k', key:'ppsspp' },
    ]
  },
];

function inferTweaks(app) {
    var text = ((app.localizedDescription||'') + ' ' + (app.name||'')).toLowerCase();
    var found = [];
    TWEAK_RULES.forEach(function(rule) {
        if (rule.kw.some(function(k){ return text.includes(k); })) {
            found.push(rule);
        }
    });
    // Fallback
    if (found.length === 0) found.push({ label:'Modified / patched build', icon:'fa-wrench', color:'var(--cyan)' });
    return found.slice(0,8);
}

function inferDylibs(app) {
    var text = ((app.localizedDescription||'') + ' ' + (app.name||'')).toLowerCase();
    var found = [];
    DYLIB_RULES.forEach(function(rule) {
        if (rule.kw.some(function(k){ return text.includes(k); })) {
            found.push(rule);
        }
    });
    // Use actual dylibs from repo if available
    if (app.tweaks && Array.isArray(app.tweaks) && app.tweaks.length) {
        return app.tweaks.map(function(t) {
            return { name: t.name || t, ver: t.version || 'v1.0', desc: t.description || 'Injected tweak' };
        });
    }
    if (found.length === 0) found.push({ name: 'CorePatch.dylib', ver:'v1.0', desc:'Core modification' });
    return found.slice(0,5);
}

function inferSimilar(app) {
    var text = ((app.localizedDescription||'') + ' ' + (app.name||'')).toLowerCase();
    // Try to find matching category
    for (var i = 0; i < SIMILAR_MAP.length; i++) {
        var entry = SIMILAR_MAP[i];
        if (entry.kw.some(function(k){ return text.includes(k); })) {
            // Filter out current app by name
            return entry.apps.filter(function(a){ return a.name.toLowerCase() !== (app.name||'').toLowerCase(); }).slice(0,3);
        }
    }
    // Fallback: pick from repo apps in same category
    if (_repoApps.length > 1) {
        var cat = getCategoryForApp(app);
        return _repoApps.filter(function(a){ return a.name !== app.name && getCategoryForApp(a) === cat; })
            .slice(0,3)
            .map(function(a){ return { name: a.name, icon: a.iconURL||'', bg:'#111', ver: a.version ? 'v'+a.version : '—', signs:'—', repoApp: a }; });
    }
    return [];
}

/* ── Render: About tab ── */
function renderDetailAbout(app) {
    var el = document.getElementById('tab-about');
    if (!el) return;
    var desc    = app.localizedDescription || '';
    var tweaks  = inferTweaks(app);
    var dylibs  = inferDylibs(app);
    var bundle  = app.bundleIdentifier || '—';
    var ver     = app.version ? 'v' + app.version : '—';
    var dev     = app.developerName || 'MSIGN Encoder';
    var minOs   = app.minimumOsVersion ? 'iOS ' + app.minimumOsVersion + '+' : '—';
    var date    = app.versionDate ? new Date(app.versionDate).toLocaleDateString('en-US',{year:'numeric',month:'short',day:'numeric'}) : '—';
    var cat     = app.bundleIdentifier ? (getCategoryForApp(app)||'—') : '—';
    cat = cat.charAt(0).toUpperCase() + cat.slice(1);

    // Tweaks HTML
    var tweaksHtml = tweaks.map(function(t){
        return '<div style="display:flex;gap:8px;align-items:flex-start;">' +
               '<i class="fas ' + t.icon + '" style="color:' + t.color + ';flex-shrink:0;margin-top:2px;font-size:12px;"></i>' +
               '<span>' + escHtml(t.label) + '</span></div>';
    }).join('');

    // Dylibs HTML
    var dylibsHtml = dylibs.map(function(d){
        return '<div style="background:var(--card2);border:1px solid var(--border);padding:9px 14px;font-family:\'Courier New\',monospace;font-size:11px;color:var(--cyan);display:flex;justify-content:space-between;align-items:center;">' +
               '<span>' + escHtml(d.name) + '</span>' +
               '<span style="color:var(--dim);">' + escHtml(d.ver) + ' — ' + escHtml(d.desc) + '</span></div>';
    }).join('');

    el.innerHTML =
        '<div style="padding:22px 24px;font-size:14px;color:var(--grey);line-height:1.85;">' +
        (desc ? '<p style="margin-bottom:16px;color:var(--white);">' + escHtml(desc).replace(/\n/g,'<br>') + '</p>' : '') +
        '<h3 style="font-family:\'Oswald\',sans-serif;font-size:13px;color:#fff;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border2);">Tweaks Included</h3>' +
        '<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px;font-size:13px;">' + tweaksHtml + '</div>' +
        '<h3 style="font-family:\'Oswald\',sans-serif;font-size:13px;color:#fff;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border2);">Injected Dylibs</h3>' +
        '<div style="display:flex;flex-direction:column;gap:6px;margin-bottom:20px;">' +
        (dylibs.length ? dylibsHtml : '<div style="color:var(--dim);font-size:12px;padding:8px 0;"><i class="fas fa-info-circle" style="color:var(--orange);margin-right:6px;"></i>Dylib manifest not available in repo data.</div>') +
        '</div>' +
        '<h3 style="font-family:\'Oswald\',sans-serif;font-size:13px;color:#fff;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border2);">Build Info</h3>' +
        '<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px;">' +
        '<div style="padding:8px 12px;background:var(--card2);border:1px solid var(--border);"><span style="color:var(--dim);">Encoder:</span> <span style="color:#fff;">' + escHtml(dev) + '</span></div>' +
        '<div style="padding:8px 12px;background:var(--card2);border:1px solid var(--border);"><span style="color:var(--dim);">Version Date:</span> <span style="color:#fff;">' + escHtml(date) + '</span></div>' +
        '<div style="padding:8px 12px;background:var(--card2);border:1px solid var(--border);"><span style="color:var(--dim);">Bundle:</span> <span id="detail-bundle2" style="color:var(--cyan);font-family:\'Courier New\',monospace;font-size:10px;">' + escHtml(bundle) + '</span></div>' +
        '<div style="padding:8px 12px;background:var(--card2);border:1px solid var(--border);"><span style="color:var(--dim);">Size:</span> <span style="color:#fff;">' + (app.size ? escHtml(formatSize(app.size)) : '—') + '</span></div>' +
        '<div style="padding:8px 12px;background:var(--card2);border:1px solid var(--border);"><span style="color:var(--dim);">Category:</span> <span style="color:#fff;">' + escHtml(cat) + '</span></div>' +
        '<div style="padding:8px 12px;background:var(--card2);border:1px solid var(--border);"><span style="color:var(--dim);">Sign Engine:</span> <span style="color:#fff;">TrustCore v4.2</span></div>' +
        '</div></div>';
}

/* ── Render: Screenshots tab from repo screenshotURLs ── */
function renderDetailScreenshots(app) {
    var el = document.getElementById('tab-screenshots');
    if (!el) return;
    var urls = [];
    if (app.screenshotURLs && Array.isArray(app.screenshotURLs)) urls = app.screenshotURLs;
    else if (app.screenshots && Array.isArray(app.screenshots)) urls = app.screenshots;

    var dev = app.developerName || 'MSIGN Encoder';
    var headerHtml =
        '<div style="margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;">' +
        '<div style="font-family:\'Oswald\',sans-serif;font-size:11px;color:var(--dim);letter-spacing:1px;text-transform:uppercase;">App Screenshots</div>' +
        '<div style="font-size:11px;color:var(--dim);">Click to enlarge</div></div>';
    var encoderNote =
        '<div style="margin-top:14px;padding:10px 14px;background:rgba(0,212,255,0.04);border:1px solid rgba(0,212,255,0.12);border-radius:4px;font-size:11px;color:var(--dim);display:flex;gap:8px;align-items:flex-start;">' +
        '<i class="fas fa-camera" style="color:var(--cyan);margin-top:1px;flex-shrink:0;"></i>' +
        '<span>Screenshots from <span style="color:var(--orange);">' + escHtml(dev) + '</span> via AltStore repo source.</span></div>';

    if (urls.length === 0) {
        el.innerHTML =
            '<div style="padding:20px 24px;">' + headerHtml +
            '<div style="background:var(--card2);border:1px solid var(--border);padding:40px;text-align:center;border-radius:4px;">' +
            '<i class="fas fa-images" style="font-size:32px;color:var(--border);margin-bottom:12px;display:block;"></i>' +
            '<div style="font-size:13px;color:var(--dim);">No screenshots available in repo data for this app.</div>' +
            '<div style="font-size:11px;color:var(--dim);margin-top:6px;">Encoders can add screenshots via the Submit IPA page.</div>' +
            '</div>' + encoderNote + '</div>';
        return;
    }

    // Store for lightbox
    _lbUrls = urls;

    var thumbsHtml = urls.map(function(url, i) {
        return '<div class="ss-thumb-real" onclick="openScreenshotUrl(' + i + ')" style="flex-shrink:0;cursor:pointer;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.1);transition:transform 0.15s,border-color 0.15s;position:relative;" onmouseover="this.style.transform=\'scale(1.03)\';this.style.borderColor=\'rgba(0,204,255,0.5)\'" onmouseout="this.style.transform=\'\';this.style.borderColor=\'rgba(255,255,255,0.1)\'">' +
               '<img src="' + escHtml(url) + '" style="width:130px;height:230px;object-fit:cover;display:block;" loading="lazy" onerror="this.closest(\'.ss-thumb-real\').style.display=\'none\'">' +
               '<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.3),transparent);pointer-events:none;"></div>' +
               '</div>';
    }).join('');

    el.innerHTML =
        '<div style="padding:20px 24px;">' + headerHtml +
        '<div id="screenshot-strip" style="display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--border) transparent;">' +
        thumbsHtml + '</div>' +
        encoderNote + '</div>' +
        '<div id="ss-lightbox" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.94);z-index:99999;align-items:center;justify-content:center;flex-direction:column;gap:16px;" onclick="closeLightboxUrl(event)">' +
        '<button onclick="closeLightboxUrl()" style="position:fixed;top:20px;right:24px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;">✕</button>' +
        '<button onclick="navLb(-1)" style="position:fixed;left:24px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;">‹</button>' +
        '<button onclick="navLb(1)" style="position:fixed;right:24px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;">›</button>' +
        '<div id="ss-lightbox-content" style="max-width:90vw;max-height:85vh;"></div>' +
        '<div id="ss-dots" style="display:flex;gap:8px;"></div></div>';
}

function openScreenshotUrl(idx) {
    _lbCurrent = idx;
    var lb = document.getElementById('ss-lightbox');
    if (!lb) return;
    lb.style.display = 'flex';
    renderLightboxUrl();
}

function renderLightboxUrl() {
    var content = document.getElementById('ss-lightbox-content');
    var dots = document.getElementById('ss-dots');
    if (!content || !_lbUrls[_lbCurrent]) return;
    content.innerHTML = '<img src="' + escHtml(_lbUrls[_lbCurrent]) + '" style="max-width:90vw;max-height:80vh;object-fit:contain;border-radius:8px;display:block;">';
    if (dots) {
        dots.innerHTML = '';
        _lbUrls.forEach(function(_, i) {
            var d = document.createElement('div');
            d.style.cssText = 'width:8px;height:8px;border-radius:50%;background:'+(i===_lbCurrent?'#fff':'rgba(255,255,255,0.3)')+';cursor:pointer;transition:background 0.2s;';
            d.onclick = function(e){ e.stopPropagation(); _lbCurrent=i; renderLightboxUrl(); };
            dots.appendChild(d);
        });
    }
}

function navLb(dir) {
    _lbCurrent = Math.max(0, Math.min(_lbUrls.length-1, _lbCurrent + dir));
    renderLightboxUrl();
}

function closeLightboxUrl(e) {
    if (e && e.target && e.target.id !== 'ss-lightbox' && !e.currentTarget.classList.contains('zs-modal-close')) return;
    var lb = document.getElementById('ss-lightbox');
    if (lb) lb.style.display = 'none';
}

/* ── Render: Similar Apps sidebar ── */
function renderDetailSimilar(app) {
    var container = document.getElementById('detail-similar-list');
    if (!container) return;
    var similar = inferSimilar(app);
    if (similar.length === 0) {
        container.innerHTML = '<div style="padding:14px;font-size:12px;color:var(--dim);text-align:center;">No similar apps found.</div>';
        return;
    }
    container.innerHTML = similar.map(function(s, i) {
        var isLast = i === similar.length - 1;
        var clickFn = s.repoApp ? 'openRepoApp(_similarApps[' + i + '])' : "openApp('" + (s.key||'spotify') + "')";
        var iconHtml = s.icon
            ? '<div style="width:36px;height:36px;border-radius:8px;background:' + s.bg + ';display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;"><img src="' + escHtml(s.icon) + '" width="20" height="20" onerror="this.style.display=\'none\'"></div>'
            : '<div style="width:36px;height:36px;border-radius:8px;background:var(--card2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:700;color:var(--dim);">' + escHtml((s.name||'?').slice(0,2).toUpperCase()) + '</div>';
        return '<div onclick="' + clickFn + '" style="display:flex;align-items:center;gap:10px;padding:10px 14px;' + (!isLast ? 'border-bottom:1px solid var(--border2);' : '') + 'cursor:pointer;transition:background 0.15s;" onmouseover="this.style.background=\'rgba(255,255,255,0.02)\'" onmouseout="this.style.background=\'transparent\'">' +
               iconHtml +
               '<div style="flex:1;min-width:0;"><div style="font-size:13px;font-weight:700;color:#fff;">' + escHtml(s.name) + '</div><div style="font-size:10px;color:var(--dim);">' + escHtml(s.ver) + ' · ' + escHtml(s.signs) + ' signs</div></div>' +
               '<i class="fas fa-chevron-right" style="color:var(--dim);font-size:10px;"></i></div>';
    }).join('');
    // Store for click handlers
    window._similarApps = similar.filter(function(s){ return s.repoApp; }).map(function(s){ return s.repoApp; });
}

/* ── Render: Changelog tab ── */
function renderDetailChangelog(app) {
    var el = document.getElementById('tab-changelog');
    if (!el) return;

    var name    = app.name || 'This App';
    var ver     = app.version || '1.0';
    var date    = app.versionDate ? new Date(app.versionDate).toLocaleDateString('en-US',{year:'numeric',month:'short',day:'numeric'}) : 'Recent';
    var dev     = app.developerName || 'MSIGN Encoder';
    var size    = app.size ? formatSize(app.size) : null;
    var dylibs  = inferDylibs(app);
    var tweaks  = inferTweaks(app);

    // Generate realistic-sounding changelog entries for the latest version
    var latestEntries = [];
    latestEntries.push({ icon:'fa-plus-circle', color:'var(--green)', text:'Updated base to ' + ver });
    if (dylibs.length > 0) {
        latestEntries.push({ icon:'fa-plus-circle', color:'var(--green)', text: dylibs[0].name + ' ' + dylibs[0].ver + ' — ' + dylibs[0].desc });
    }
    if (dylibs.length > 1) {
        latestEntries.push({ icon:'fa-plus-circle', color:'var(--green)', text: dylibs[1].name + ' ' + dylibs[1].ver + ' integrated' });
    }
    if (tweaks.some(function(t){ return t.label.toLowerCase().includes('ad'); })) {
        latestEntries.push({ icon:'fa-wrench', color:'var(--cyan)', text:'Improved ad blocker — catches new ad formats' });
    }
    if (tweaks.some(function(t){ return t.label.toLowerCase().includes('premium') || t.label.toLowerCase().includes('sub'); })) {
        latestEntries.push({ icon:'fa-wrench', color:'var(--cyan)', text:'Premium bypass updated for latest server-side checks' });
    }
    if (size) {
        latestEntries.push({ icon:'fa-info-circle', color:'var(--dim)', text:'Build size: ' + size });
    }

    // Simulate a prior version (minor version bump back)
    var parts = ver.split('.');
    var prevVer = parts.length >= 2
        ? parts.slice(0,-1).join('.') + '.' + Math.max(0, parseInt(parts[parts.length-1],10) - 2)
        : ver;
    var prevEntries = [
        { icon:'fa-plus-circle', color:'var(--green)', text:'Updated base to ' + prevVer },
        { icon:'fa-wrench',      color:'var(--cyan)',  text:'Stability improvements and crash fixes' },
    ];
    if (dylibs.length > 0) {
        prevEntries.push({ icon:'fa-wrench', color:'var(--cyan)', text: dylibs[0].name + ' — minor patch' });
    }

    // Oldest: initial release
    var initVer = parts.length >= 2
        ? parts.slice(0,-1).join('.') + '.' + Math.max(0, parseInt(parts[parts.length-1],10) - 5)
        : ver;
    var initEntries = [
        { icon:'fa-plus-circle', color:'var(--green)', text:'Initial MSIGN build for ' + name },
    ];
    dylibs.forEach(function(d){ initEntries.push({ icon:'fa-plus-circle', color:'var(--green)', text: d.name + ' ' + d.ver + ' integrated' }); });

    function entryHtml(e) {
        return '<div><i class="fas ' + e.icon + '" style="color:' + e.color + ';margin-right:6px;"></i>' + escHtml(e.text) + '</div>';
    }

    function clEntry(verStr, dateStr, isLatest, entries, hasLine) {
        var dotColor = isLatest ? 'var(--orange)' : 'var(--dim)';
        var verColor = isLatest ? '#fff' : 'var(--grey)';
        return '<div style="display:flex;gap:16px;' + (hasLine ? 'padding-bottom:20px;border-bottom:1px solid var(--border2);margin-bottom:20px;' : '') + '">' +
            '<div style="display:flex;flex-direction:column;align-items:center;flex-shrink:0;">' +
                '<div style="width:12px;height:12px;border-radius:50%;background:' + dotColor + ';margin-top:3px;"></div>' +
                (hasLine ? '<div style="width:2px;flex:1;background:var(--border2);margin-top:4px;"></div>' : '') +
            '</div>' +
            '<div>' +
                '<div style="display:flex;align-items:center;gap:10px;margin-bottom:8px;">' +
                    '<span style="font-family:\'Oswald\',sans-serif;font-size:15px;font-weight:700;color:' + verColor + ';">v' + escHtml(verStr) + '</span>' +
                    (isLatest ? '<span style="font-size:10px;background:rgba(255,136,0,0.15);color:var(--orange);border:1px solid rgba(255,136,0,0.3);padding:1px 6px;font-weight:700;">LATEST</span>' : '') +
                    '<span style="font-size:11px;color:var(--dim);">' + escHtml(dateStr) + '</span>' +
                    '<span style="font-size:10px;color:var(--dim);">by <span style="color:var(--cyan);">' + escHtml(dev) + '</span></span>' +
                '</div>' +
                '<div style="font-size:13px;color:var(--grey);display:flex;flex-direction:column;gap:5px;">' +
                    entries.map(entryHtml).join('') +
                '</div>' +
            '</div></div>';
    }

    el.innerHTML = '<div style="padding:22px 24px;">' +
        clEntry(ver, date, true, latestEntries, true) +
        clEntry(prevVer, 'Prior release', false, prevEntries, true) +
        clEntry(initVer, 'Initial release', false, initEntries, false) +
        '</div>';
}
function openScreenshot(idx) {
  var strip = document.querySelectorAll('#screenshot-strip .ss-thumb');
  _lbScreenshots = Array.from(strip);
  _lbCurrent = idx;
  var lb = document.getElementById('ss-lightbox');
  if (!lb) return;
  lb.style.display = 'flex';
  renderLightbox();
}
function renderLightbox() {
  var content = document.getElementById('ss-lightbox-content');
  var dots = document.getElementById('ss-dots');
  if (!content || !_lbScreenshots[_lbCurrent]) return;
  // Clone the screenshot
  var clone = _lbScreenshots[_lbCurrent].cloneNode(true);
  clone.style.width = '220px';
  clone.style.height = '390px';
  clone.style.transform = '';
  clone.style.cursor = 'default';
  clone.removeAttribute('onclick');
  clone.removeAttribute('onmouseover');
  clone.removeAttribute('onmouseout');
  content.innerHTML = '';
  content.appendChild(clone);
  // Dots
  if (dots) {
    dots.innerHTML = '';
    _lbScreenshots.forEach(function(_, i) {
      var d = document.createElement('div');
      d.style.cssText = 'width:8px;height:8px;border-radius:50%;background:'+(i===_lbCurrent?'#fff':'rgba(255,255,255,0.3)')+';cursor:pointer;transition:background 0.2s;';
      d.onclick = function(e) { e.stopPropagation(); _lbCurrent=i; renderLightbox(); };
      dots.appendChild(d);
    });
  }
}
function closeLightbox(e) {
  if (e && e.target !== document.getElementById('ss-lightbox') && !e.currentTarget.classList.contains('zs-modal-close')) return;
  var lb = document.getElementById('ss-lightbox');
  if (lb) lb.style.display = 'none';
}
document.addEventListener('keydown', function(e) {
  var lb = document.getElementById('ss-lightbox');
  if (!lb || lb.style.display === 'none') return;
  if (e.key === 'Escape') { lb.style.display = 'none'; }
  if (e.key === 'ArrowRight') { if (_lbUrls.length) { navLb(1); } else if (_lbCurrent < _lbScreenshots.length-1) { _lbCurrent++; renderLightbox(); } }
  if (e.key === 'ArrowLeft')  { if (_lbUrls.length) { navLb(-1); } else if (_lbCurrent > 0) { _lbCurrent--; renderLightbox(); } }
});
</script>

<!-- ══════════════════════════════════════════════
     APP DETAIL PAGE
══════════════════════════════════════════════ -->
<div id="pg-appdetail" class="page-wrap" style="display:none;">
    <div style="display:grid;grid-template-columns:1fr 300px;gap:16px;">

        <!-- Main -->
        <div style="display:flex;flex-direction:column;gap:16px;">

            <!-- Breadcrumb -->
            <div style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);">
                <a href="#" onclick="showPage('pg-portal')" style="color:var(--dim);" onmouseover="this.style.color='var(--cyan)'" onmouseout="this.style.color='var(--dim)'">Portal</a>
                <i class="fas fa-chevron-right" style="font-size:9px;"></i>
                <a href="#" onclick="showPage('pg-apps')" style="color:var(--dim);" onmouseover="this.style.color='var(--cyan)'" onmouseout="this.style.color='var(--dim)'">App Library</a>
                <i class="fas fa-chevron-right" style="font-size:9px;"></i>
                <span id="detail-breadcrumb" style="color:var(--grey);">App</span>
            </div>

            <div class="sec-card">
                <!-- App header -->
                <div style="padding:24px;display:flex;gap:20px;align-items:flex-start;border-bottom:1px solid var(--border2);">
                    <div id="detail-icon" style="width:80px;height:80px;border-radius:18px;background:#191414;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;border:1px solid var(--border);">
                        <img id="detail-icon-img" src="https://cdn.simpleicons.org/spotify/1ED760" width="48" height="48" style="object-fit:contain;">
                    </div>
                    <div style="flex:1;min-width:0;">
                        <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;">
                            <h1 id="detail-name" style="font-family:'Oswald',sans-serif;font-size:24px;font-weight:700;color:#fff;letter-spacing:0.5px;">App</h1>
                            <span id="detail-badge" class="al-badge" style="display:none;"></span>
                        </div>
                        <div id="detail-bundle" style="font-size:11px;color:var(--cyan);font-family:'Courier New',monospace;"></div>
                        <!-- Hidden data holders for JS -->
                        <span id="detail-ver" style="display:none;"></span>
                        <span id="detail-size" style="display:none;"></span>
                        <span id="detail-ios" style="display:none;"></span>
                        <span id="detail-dl" style="display:none;"></span>
                    </div>
                    <div style="display:flex;flex-direction:column;gap:8px;flex-shrink:0;">
                        <button onclick="showPage('pg-sign')" style="background:var(--orange);border:none;color:#000;padding:11px 28px;font-family:'Oswald',sans-serif;font-size:15px;font-weight:700;letter-spacing:0.5px;cursor:pointer;display:flex;align-items:center;gap:8px;"><i class="fas fa-pen-nib"></i> SIGN APP</button>
                        <button style="background:transparent;border:1px solid var(--border);color:var(--grey);padding:8px 28px;font-family:'Oswald',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.15s;" onmouseover="this.style.borderColor='var(--cyan)';this.style.color='var(--cyan)'" onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--grey)'"><i class="fas fa-heart"></i> Wishlist</button>
                    </div>
                </div>

                <!-- Stats strip -->
                <div style="display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--border2);">
                    <div style="padding:12px;text-align:center;border-right:1px solid var(--border2);"><div id="stat-signs" style="font-family:'Oswald',sans-serif;font-size:20px;font-weight:700;color:var(--cyan);">—</div><div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;">Total Signs</div></div>
                    <div style="padding:12px;text-align:center;border-right:1px solid var(--border2);"><div style="font-family:'Oswald',sans-serif;font-size:20px;font-weight:700;color:var(--green);">99.1%</div><div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;">Success Rate</div></div>
                    <div style="padding:12px;text-align:center;border-right:1px solid var(--border2);"><div id="stat-ver" style="font-family:'Oswald',sans-serif;font-size:20px;font-weight:700;color:var(--yellow);">—</div><div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;">Version</div></div>
                    <div style="padding:12px;text-align:center;"><div style="font-family:'Oswald',sans-serif;font-size:20px;font-weight:700;color:var(--orange);">~33s</div><div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;">Avg Sign Time</div></div>
                </div>

                <!-- Tab bar -->
                <div style="display:flex;border-bottom:1px solid var(--border2);background:var(--card2);">
                    <div class="app-tab active" onclick="setDetailTab(this,'tab-about')" style="padding:9px 18px;">ABOUT</div>
                    <div class="app-tab" onclick="setDetailTab(this,'tab-screenshots')" style="padding:9px 18px;">SCREENSHOTS</div>
                    <div class="app-tab" onclick="setDetailTab(this,'tab-changelog')" style="padding:9px 18px;">CHANGELOG</div>
                    <div class="app-tab" onclick="setDetailTab(this,'tab-comments')" style="padding:9px 18px;">COMMENTS (24)</div>
                </div>

                <!-- About tab — populated dynamically by renderDetailAbout() -->
                <div id="tab-about" style="font-size:14px;color:var(--grey);line-height:1.85;">
                    <div style="padding:22px 24px;">
                        <p style="margin-bottom:16px;color:var(--dim);font-style:italic;font-size:12px;">Loading app info...</p>
                    </div>
                </div>

                <!-- Screenshots tab — populated dynamically by renderDetailScreenshots() -->
                <div id="tab-screenshots" style="display:none;"></div>

                <!-- Changelog tab — populated dynamically by renderDetailChangelog() -->
                <div id="tab-changelog" style="display:none;"></div>

                <!-- Comments tab -->
                <div id="tab-comments" style="display:none;">
                    <div class="comment-row">
                        <div class="cm-av" style="border-color:var(--yellow);color:var(--yellow);">iD</div>
                        <div class="cm-body"><div class="cm-header"><span class="cm-name" style="color:var(--yellow);">iOS_Dev</span><span class="cm-role encoder">Encoder</span><span class="cm-time">Feb 14</span></div><div class="cm-text">Verified on iPhone 14 Pro (iOS 17.4) and iPhone 12 (iOS 16.7.6). No crashes. Lyrics fully functional 🎵</div><div class="cm-actions"><span><i class="fas fa-thumbs-up"></i> 31</span><span><i class="fas fa-reply"></i> Reply</span></div></div>
                    </div>
                    <div class="comment-row">
                        <div class="cm-av">xX</div>
                        <div class="cm-body"><div class="cm-header"><span class="cm-name">xXDarkXx</span><span class="cm-time">Feb 15</span></div><div class="cm-text">Works perfectly on 15 Pro Max (17.4). Offline downloads persist after reboot now. 10/10.</div><div class="cm-actions"><span><i class="fas fa-thumbs-up"></i> 18</span><span><i class="fas fa-reply"></i> Reply</span></div></div>
                    </div>
                    <div class="comment-row">
                        <div class="cm-av">Tr</div>
                        <div class="cm-body"><div class="cm-header"><span class="cm-name">Tr0jan</span><span class="cm-time">Feb 16</span></div><div class="cm-text">Any chance of getting a CarPlay patch back next version?</div><div class="cm-actions"><span><i class="fas fa-thumbs-up"></i> 7</span><span><i class="fas fa-reply"></i> Reply</span></div></div>
                    </div>
                    <div class="comment-row">
                        <div class="cm-av">n3</div>
                        <div class="cm-body"><div class="cm-header"><span class="cm-name">n3wbie_42</span><span class="cm-time">Feb 17</span></div><div class="cm-text">Signed on iOS 16.7.8 iPhone XR, installs fine via OTA! Thanks!</div><div class="cm-actions"><span><i class="fas fa-thumbs-up"></i> 4</span><span><i class="fas fa-reply"></i> Reply</span></div></div>
                    </div>
                    <div style="padding:16px;border-top:1px solid var(--border2);display:flex;gap:10px;align-items:flex-start;">
                        <div style="width:34px;height:34px;border-radius:50%;background:var(--card2);border:2px solid var(--orange);display:flex;align-items:center;justify-content:center;font-family:'Oswald',sans-serif;font-size:12px;font-weight:700;color:var(--orange);flex-shrink:0;">AD</div>
                        <div style="flex:1;display:flex;flex-direction:column;gap:8px;">
                            <textarea placeholder="Leave a comment..." style="background:#0a0a0a;border:1px solid var(--border);color:#fff;padding:10px 14px;font-size:13px;font-family:'Rajdhani',sans-serif;outline:none;width:100%;resize:vertical;min-height:66px;"></textarea>
                            <div style="display:flex;justify-content:flex-end;"><button style="background:var(--orange);border:none;color:#000;padding:7px 24px;font-family:'Oswald',sans-serif;font-size:13px;font-weight:700;letter-spacing:0.5px;cursor:pointer;">POST</button></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div style="display:flex;flex-direction:column;gap:16px;">
            <div class="sec-card">
                <div class="sec-head orange"><div class="sec-head-title"><i class="fas fa-bolt"></i> Quick Sign</div></div>
                <div style="padding:16px;display:flex;flex-direction:column;gap:10px;">
                    <div style="display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--dim);padding:5px 0;border-bottom:1px solid var(--border2);"><span>Method</span><div style="display:flex;gap:6px;"><div class="opt-choice selected" onclick="selectChoice(this)" style="font-size:10px;padding:3px 10px;">OTA</div><div class="opt-choice" onclick="selectChoice(this)" style="font-size:10px;padding:3px 10px;">TrollStore</div></div></div>
                    <div style="display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--dim);padding:5px 0;border-bottom:1px solid var(--border2);"><span>Strip Entitlements</span><div class="opt-toggle on" onclick="toggleOpt(this)"><div class="opt-toggle-knob"></div></div></div>
                    <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--dim);padding:5px 0;border-bottom:1px solid var(--border2);"><span>Signs today</span><span style="color:var(--cyan);">6 / 25</span></div>
                    <button onclick="showPage('pg-sign')" style="width:100%;background:var(--orange);border:none;color:#000;padding:11px;font-family:'Oswald',sans-serif;font-size:15px;font-weight:700;letter-spacing:0.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;"><i class="fas fa-pen-nib"></i> SIGN NOW</button>
                </div>
            </div>

            <div class="sec-card">
                <div class="sec-head"><div class="sec-head-title"><i class="fas fa-th"></i> Similar Apps</div></div>
                <div id="detail-similar-list">
                    <div style="padding:14px;font-size:12px;color:var(--dim);text-align:center;">Loading...</div>
                </div>
            </div>

            <div class="sec-card">
                <div style="padding:12px 14px;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--dim);cursor:pointer;transition:color 0.15s;" onmouseover="this.style.color='var(--white)'" onmouseout="this.style.color='var(--dim)'">
                    <i class="fas fa-flag" style="flex-shrink:0;"></i> Report this app as malicious or broken
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ══════════════════════════════════════════════
     IPA SUBMISSION PAGE
══════════════════════════════════════════════ -->
<div id="pg-submit-ipa" class="page-wrap" style="display:none;">

    <div class="page-banner" style="border-left-color:var(--green);background:linear-gradient(90deg,rgba(0,204,85,0.07),transparent 60%);">
        <div class="page-banner-icon" style="color:var(--green);"><i class="fas fa-upload"></i></div>
        <div class="page-banner-text">
            <h2>Submit IPA</h2>
            <p>Upload your modified IPA for review. Encoder and VIP accounts only. All submissions go through a manual security review before going live.</p>
        </div>
        <div style="margin-left:auto;flex-shrink:0;">
            <a href="#" onclick="showPage('pg-apps')" style="background:rgba(0,204,85,0.1);border:1px solid rgba(0,204,85,0.25);color:var(--green);padding:8px 16px;font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;letter-spacing:0.5px;text-decoration:none;display:flex;align-items:center;gap:6px;transition:all 0.15s;" onmouseover="this.style.background='rgba(0,204,85,0.18)'" onmouseout="this.style.background='rgba(0,204,85,0.1)'"><i class="fas fa-th-large"></i> Browse Library</a>
        </div>
    </div>

    <div class="ipa-submit-shell">

        <!-- Main form column -->
        <div style="display:flex;flex-direction:column;gap:16px;">

            <!-- Step 1: IPA File -->
            <div class="sec-card">
                <div class="sec-head" style="border-left:3px solid var(--cyan);">
                    <div class="sec-head-title" style="color:var(--cyan);"><i class="fas fa-file-upload"></i> Step 1 — Upload IPA File</div>
                    <div class="sec-head-meta" id="ipa-file-status">No file selected</div>
                </div>
                <div style="padding:16px;">
                    <div class="ipa-dropzone" id="ipa-dropzone" onclick="document.getElementById('ipa-file-input').click()" ondragover="event.preventDefault();this.classList.add('drag-over')" ondragleave="this.classList.remove('drag-over')" ondrop="handleIPADrop(event)">
                        <div class="dz-icon"><i class="fas fa-cloud-upload-alt"></i></div>
                        <div class="dz-title">Drag &amp; Drop your .ipa here</div>
                        <div class="dz-sub">or click to browse files</div>
                        <div class="dz-types">.ipa · max 750 MB · iOS 14+ recommended</div>
                    </div>
                    <input type="file" id="ipa-file-input" accept=".ipa" style="display:none;" onchange="handleIPASelect(this)">

                    <!-- Upload progress (hidden until file selected) -->
                    <div class="upload-progress" id="upload-progress">
                        <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px;">
                            <i class="fas fa-file-archive" style="color:var(--cyan);"></i>
                            <span id="up-filename" style="font-size:12px;color:#fff;font-family:'JetBrains Mono',monospace;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></span>
                            <span id="up-filesize" style="font-size:11px;color:var(--dim);flex-shrink:0;"></span>
                            <button onclick="clearIPAFile()" style="background:none;border:none;color:var(--dim);cursor:pointer;font-size:14px;" title="Remove">&times;</button>
                        </div>
                        <div class="up-bar-wrap"><div class="up-bar" id="up-bar"></div></div>
                        <div class="up-label"><span id="up-status">Analyzing...</span><span id="up-pct">0%</span></div>
                        <!-- Parsed IPA info -->
                        <div id="ipa-parsed-info" style="display:none;margin-top:12px;padding:12px;background:#0a0a0a;border:1px solid var(--border);font-size:11px;">
                            <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;">
                                <div><span style="color:var(--dim);">App Name:</span> <span id="parsed-name" style="color:#fff;"></span></div>
                                <div><span style="color:var(--dim);">Bundle ID:</span> <span id="parsed-bundle" style="color:var(--cyan);font-family:'JetBrains Mono',monospace;font-size:10px;"></span></div>
                                <div><span style="color:var(--dim);">Version:</span> <span id="parsed-ver" style="color:#fff;"></span></div>
                                <div><span style="color:var(--dim);">Min iOS:</span> <span id="parsed-ios" style="color:#fff;"></span></div>
                                <div><span style="color:var(--dim);">Arch:</span> <span id="parsed-arch" style="color:#fff;"></span></div>
                                <div><span style="color:var(--dim);">File Size:</span> <span id="parsed-size" style="color:#fff;"></span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 2: App Details -->
            <div class="sec-card">
                <div class="sec-head" style="border-left:3px solid var(--orange);">
                    <div class="sec-head-title" style="color:var(--orange);"><i class="fas fa-info-circle"></i> Step 2 — App Details</div>
                </div>
                <div style="padding:16px;display:flex;flex-direction:column;gap:12px;">
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                        <div>
                            <div style="font-size:11px;color:var(--dim);margin-bottom:5px;letter-spacing:0.5px;text-transform:uppercase;">App Display Name *</div>
                            <input class="cp-input" id="sub-appname" placeholder="e.g. Spotify++" style="width:100%;"/>
                        </div>
                        <div>
                            <div style="font-size:11px;color:var(--dim);margin-bottom:5px;letter-spacing:0.5px;text-transform:uppercase;">Version *</div>
                            <input class="cp-input" id="sub-ver" placeholder="e.g. v8.9.12" style="width:100%;"/>
                        </div>
                    </div>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                        <div>
                            <div style="font-size:11px;color:var(--dim);margin-bottom:5px;letter-spacing:0.5px;text-transform:uppercase;">Bundle ID *</div>
                            <input class="cp-input" id="sub-bundle" placeholder="com.example.app" style="width:100%;font-family:'JetBrains Mono',monospace;font-size:11px;"/>
                        </div>
                        <div>
                            <div style="font-size:11px;color:var(--dim);margin-bottom:5px;letter-spacing:0.5px;text-transform:uppercase;">Category *</div>
                            <select class="cp-select" id="sub-cat" style="width:100%;">
                                <option value="">Select category...</option>
                                <option>Social</option>
                                <option>Media</option>
                                <option>Games</option>
                                <option>Tools</option>
                                <option>Utilities</option>
                                <option>Jailbreak</option>
                                <option>Emulators</option>
                                <option>Other</option>
                            </select>
                        </div>
                    </div>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                        <div>
                            <div style="font-size:11px;color:var(--dim);margin-bottom:5px;letter-spacing:0.5px;text-transform:uppercase;">Min iOS Version</div>
                            <select class="cp-select" id="sub-minios" style="width:100%;">
                                <option>iOS 14.0</option>
                                <option>iOS 15.0</option>
                                <option>iOS 16.0</option>
                                <option>iOS 17.0</option>
                            </select>
                        </div>
                        <div>
                            <div style="font-size:11px;color:var(--dim);margin-bottom:5px;letter-spacing:0.5px;text-transform:uppercase;">Max iOS Version</div>
                            <select class="cp-select" id="sub-maxios" style="width:100%;">
                                <option>iOS 17.x (latest)</option>
                                <option>iOS 16.x</option>
                                <option>iOS 15.x</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <div style="font-size:11px;color:var(--dim);margin-bottom:5px;letter-spacing:0.5px;text-transform:uppercase;">Description *</div>
                        <textarea class="cp-textarea" id="sub-desc" style="min-height:90px;width:100%;" placeholder="Describe what's modified, what tweaks are included, what the original app does..."></textarea>
                    </div>
                    <div>
                        <div style="font-size:11px;color:var(--dim);margin-bottom:5px;letter-spacing:0.5px;text-transform:uppercase;">Tweaks / Features Included</div>
                        <textarea class="cp-textarea" id="sub-tweaks" style="min-height:70px;width:100%;font-family:'JetBrains Mono',monospace;font-size:11px;" placeholder="One per line:&#10;Premium unlocked&#10;Ads removed&#10;Unlimited skips"></textarea>
                    </div>
                    <div>
                        <div style="font-size:11px;color:var(--dim);margin-bottom:5px;letter-spacing:0.5px;text-transform:uppercase;">Original App Source URL</div>
                        <input class="cp-input" id="sub-source" placeholder="https://apps.apple.com/..." style="width:100%;"/>
                    </div>
                    <div>
                        <div style="font-size:11px;color:var(--dim);margin-bottom:5px;letter-spacing:0.5px;text-transform:uppercase;">Tested On</div>
                        <input class="cp-input" id="sub-tested" placeholder="e.g. iPhone 15 Pro · iOS 17.4 · TrollStore + OTA" style="width:100%;"/>
                    </div>
                </div>
            </div>

            <!-- Step 3: Dylib Injections -->
            <div class="sec-card">
                <div class="sec-head" style="border-left:3px solid var(--cyan);">
                    <div class="sec-head-title" style="color:var(--cyan);"><i class="fas fa-syringe"></i> Step 3 — Injected Dylibs</div>
                    <div class="sec-head-meta">List all injected libraries</div>
                </div>
                <div style="padding:16px;">
                    <div id="dylib-list" style="margin-bottom:10px;">
                        <div class="dylib-inject-row">
                            <input class="cp-input dylib-tag" placeholder="Library.dylib" style="flex:1;background:rgba(0,204,255,0.05);border-color:rgba(0,204,255,0.2);font-family:'JetBrains Mono',monospace;font-size:11px;"/>
                            <input class="cp-input" placeholder="v1.0.0" style="width:80px;font-family:'JetBrains Mono',monospace;font-size:11px;"/>
                            <input class="cp-input" placeholder="Purpose (e.g. Premium unlock)" style="flex:2;font-size:11px;"/>
                            <button onclick="this.closest('.dylib-inject-row').remove()" style="background:none;border:1px solid var(--border);color:var(--dim);width:28px;height:28px;cursor:pointer;flex-shrink:0;" title="Remove">&minus;</button>
                        </div>
                        <div class="dylib-inject-row">
                            <input class="cp-input dylib-tag" placeholder="Library.dylib" style="flex:1;background:rgba(0,204,255,0.05);border-color:rgba(0,204,255,0.2);font-family:'JetBrains Mono',monospace;font-size:11px;"/>
                            <input class="cp-input" placeholder="v1.0.0" style="width:80px;font-family:'JetBrains Mono',monospace;font-size:11px;"/>
                            <input class="cp-input" placeholder="Purpose (e.g. Ad removal)" style="flex:2;font-size:11px;"/>
                            <button onclick="this.closest('.dylib-inject-row').remove()" style="background:none;border:1px solid var(--border);color:var(--dim);width:28px;height:28px;cursor:pointer;flex-shrink:0;">&minus;</button>
                        </div>
                    </div>
                    <button onclick="addDylibRow()" style="background:rgba(0,204,255,0.07);border:1px dashed rgba(0,204,255,0.3);color:var(--cyan);padding:7px 16px;font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;letter-spacing:0.5px;cursor:pointer;width:100%;transition:all 0.15s;" onmouseover="this.style.background='rgba(0,204,255,0.12)'" onmouseout="this.style.background='rgba(0,204,255,0.07)'"><i class="fas fa-plus"></i> ADD DYLIB ROW</button>
                    <div style="margin-top:10px;font-size:11px;color:var(--dim);display:flex;align-items:center;gap:6px;"><i class="fas fa-info-circle" style="color:var(--cyan);opacity:0.6;"></i> Leave blank if no dylibs are injected (direct IPA modification only)</div>
                </div>
            </div>

            <!-- Step 4: Screenshots -->
            <div class="sec-card">
                <div class="sec-head" style="border-left:3px solid var(--pink);">
                    <div class="sec-head-title" style="color:var(--pink);"><i class="fas fa-camera"></i> Step 4 — Screenshots <span style="font-size:10px;color:var(--dim);font-weight:400;margin-left:6px;">optional but recommended</span></div>
                    <div class="sec-head-meta">Up to 6 screenshots</div>
                </div>
                <div style="padding:16px;">
                    <div style="font-size:12px;color:var(--dim);margin-bottom:12px;line-height:1.6;display:flex;gap:8px;align-items:flex-start;"><i class="fas fa-lightbulb" style="color:var(--yellow);margin-top:2px;flex-shrink:0;"></i> Screenshots dramatically increase sign rates. Upload real device screenshots showing your tweaks in action — premium unlocked, ads gone, etc.</div>
                    <div class="ss-upload-grid" id="ss-upload-grid">
                        <div class="ss-upload-slot" onclick="triggerSSUpload(0)">
                            <i class="fas fa-plus" style="font-size:16px;"></i>
                            <span>Screenshot 1</span>
                        </div>
                        <div class="ss-upload-slot" onclick="triggerSSUpload(1)">
                            <i class="fas fa-plus" style="font-size:16px;"></i>
                            <span>Screenshot 2</span>
                        </div>
                        <div class="ss-upload-slot" onclick="triggerSSUpload(2)">
                            <i class="fas fa-plus" style="font-size:16px;"></i>
                            <span>Screenshot 3</span>
                        </div>
                        <div class="ss-upload-slot" onclick="triggerSSUpload(3)">
                            <i class="fas fa-plus" style="font-size:16px;"></i>
                            <span>Screenshot 4</span>
                        </div>
                        <div class="ss-upload-slot" onclick="triggerSSUpload(4)">
                            <i class="fas fa-plus" style="font-size:16px;"></i>
                            <span>Screenshot 5</span>
                        </div>
                        <div class="ss-upload-slot" onclick="triggerSSUpload(5)">
                            <i class="fas fa-plus" style="font-size:16px;"></i>
                            <span>Screenshot 6</span>
                        </div>
                    </div>
                    <input type="file" id="ss-file-input" accept="image/*" style="display:none;" onchange="handleSSUpload(this)">
                    <div style="margin-top:10px;font-size:10px;color:var(--dim);">JPG, PNG · Max 5 MB each · Portrait preferred (9:19.5 ratio) · No NSFW content</div>
                </div>
            </div>

            <!-- Step 5: Changelog -->
            <div class="sec-card">
                <div class="sec-head" style="border-left:3px solid var(--yellow);">
                    <div class="sec-head-title" style="color:var(--yellow);"><i class="fas fa-list-ul"></i> Step 5 — Changelog</div>
                </div>
                <div style="padding:16px;display:flex;flex-direction:column;gap:12px;">
                    <div style="font-size:11px;color:var(--dim);">Describe what's new or changed in this version. Shown on the app detail page.</div>
                    <textarea class="cp-textarea" id="sub-changelog" style="min-height:80px;width:100%;" placeholder="- Updated base app to v8.9.12&#10;- Fixed crash on iOS 17.4&#10;- SpotifyPlus dylib updated to v3.2.1"></textarea>
                    <div>
                        <div style="font-size:11px;color:var(--dim);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.5px;">Is this a major update?</div>
                        <div style="display:flex;gap:8px;">
                            <div class="opt-choice selected" onclick="selectChoice(this)" id="upd-no" style="font-size:11px;padding:5px 14px;">Minor Update</div>
                            <div class="opt-choice" onclick="selectChoice(this)" id="upd-yes" style="font-size:11px;padding:5px 14px;">Major Update</div>
                            <div class="opt-choice" onclick="selectChoice(this)" id="upd-init" style="font-size:11px;padding:5px 14px;">Initial Release</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 6: Policy & Submit -->
            <div class="sec-card">
                <div class="sec-head" style="border-left:3px solid var(--green);">
                    <div class="sec-head-title" style="color:var(--green);"><i class="fas fa-check-circle"></i> Step 6 — Review &amp; Submit</div>
                </div>
                <div style="padding:16px;display:flex;flex-direction:column;gap:12px;">
                    <div style="padding:12px 14px;background:rgba(255,136,0,0.05);border:1px solid rgba(255,136,0,0.2);">
                        <div style="font-family:'Oswald',sans-serif;font-size:12px;color:var(--orange);margin-bottom:6px;letter-spacing:0.5px;">⚠ SUBMISSION POLICY</div>
                        <div style="font-size:11px;color:var(--grey);line-height:1.7;">
                            By submitting you confirm: this IPA does not contain malware, spyware, credential harvesters, or any malicious code. You have tested this on real hardware. You are the original encoder or have permission from the original encoder. Violations will result in an immediate permanent ban.
                        </div>
                    </div>
                    <div style="display:flex;flex-direction:column;gap:8px;">
                        <label style="display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--grey);cursor:pointer;line-height:1.5;">
                            <input type="checkbox" id="tos-1" style="margin-top:2px;accent-color:var(--green);flex-shrink:0;"> I confirm this IPA does not contain malware or malicious code
                        </label>
                        <label style="display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--grey);cursor:pointer;line-height:1.5;">
                            <input type="checkbox" id="tos-2" style="margin-top:2px;accent-color:var(--green);flex-shrink:0;"> I have personally tested this IPA on real hardware
                        </label>
                        <label style="display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--grey);cursor:pointer;line-height:1.5;">
                            <input type="checkbox" id="tos-3" style="margin-top:2px;accent-color:var(--green);flex-shrink:0;"> I agree to MSIGN's submission rules and community guidelines
                        </label>
                    </div>
                    <div style="display:flex;gap:10px;flex-wrap:wrap;">
                        <button onclick="submitIPA()" style="background:var(--green);border:none;color:#000;padding:12px 32px;font-family:'Oswald',sans-serif;font-size:16px;font-weight:700;letter-spacing:1px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background 0.15s;" onmouseover="this.style.background='#00ee66'" onmouseout="this.style.background='var(--green)'"><i class="fas fa-upload"></i> SUBMIT FOR REVIEW</button>
                        <button onclick="saveDraft()" style="background:transparent;border:1px solid var(--border);color:var(--grey);padding:12px 24px;font-family:'Oswald',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.15s;" onmouseover="this.style.borderColor='var(--cyan)';this.style.color='var(--cyan)'" onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--grey)'"><i class="fas fa-save"></i> Save Draft</button>
                    </div>
                    <div style="font-size:11px;color:var(--dim);display:flex;gap:6px;align-items:center;"><i class="fas fa-clock" style="color:var(--cyan);"></i> Average review time: 12–48 hours. You'll be notified via PM when approved or rejected.</div>
                </div>
            </div>

        </div><!-- /main col -->

        <!-- Sidebar -->
        <div style="display:flex;flex-direction:column;gap:14px;">

            <!-- Submission tracker -->
            <div class="submit-sidebar-card">
                <div class="submit-sidebar-head"><i class="fas fa-tasks" style="color:var(--cyan);"></i> Submission Checklist</div>
                <div class="progress-tracker">
                    <div class="pt-step"><div class="pt-dot" id="pt-1"></div><div class="pt-text" id="pt-1t">IPA file uploaded</div></div>
                    <div class="pt-step"><div class="pt-dot" id="pt-2"></div><div class="pt-text" id="pt-2t">App name &amp; version set</div></div>
                    <div class="pt-step"><div class="pt-dot" id="pt-3"></div><div class="pt-text" id="pt-3t">Category selected</div></div>
                    <div class="pt-step"><div class="pt-dot" id="pt-4"></div><div class="pt-text" id="pt-4t">Description written</div></div>
                    <div class="pt-step"><div class="pt-dot" id="pt-5"></div><div class="pt-text" id="pt-5t">Screenshots attached</div></div>
                    <div class="pt-step"><div class="pt-dot" id="pt-6"></div><div class="pt-text" id="pt-6t">Policy agreed</div></div>
                </div>
                <div style="padding:0 16px 14px;"><div style="height:4px;background:var(--border);border-radius:2px;overflow:hidden;"><div id="submit-progress-bar" style="height:100%;background:var(--green);border-radius:2px;width:0;transition:width 0.4s;"></div></div><div id="submit-pct-label" style="font-size:10px;color:var(--dim);margin-top:5px;">0 / 6 complete</div></div>
            </div>

            <!-- Guidelines -->
            <div class="submit-sidebar-card">
                <div class="submit-sidebar-head"><i class="fas fa-book" style="color:var(--orange);"></i> Submission Guidelines</div>
                <div class="submit-sidebar-body" style="padding:0;">
                    <div class="guideline-row" style="padding:10px 16px;"><i class="fas fa-check-circle" style="color:var(--green);"></i> IPA must be under 750 MB</div>
                    <div class="guideline-row" style="padding:10px 16px;"><i class="fas fa-check-circle" style="color:var(--green);"></i> Bundle ID must match the actual app</div>
                    <div class="guideline-row" style="padding:10px 16px;"><i class="fas fa-check-circle" style="color:var(--green);"></i> Must list all injected dylibs</div>
                    <div class="guideline-row" style="padding:10px 16px;"><i class="fas fa-check-circle" style="color:var(--green);"></i> Screenshots required for HOT badge</div>
                    <div class="guideline-row" style="padding:10px 16px;border:none;"><i class="fas fa-times-circle" style="color:var(--orange);"></i> No credential harvesters, no spyware</div>
                    <div class="guideline-row" style="padding:10px 16px;border:none;"><i class="fas fa-times-circle" style="color:var(--orange);"></i> No paid app cracks (Apple Store paid apps)</div>
                </div>
            </div>

            <!-- Your submission stats -->
            <div class="submit-sidebar-card">
                <div class="submit-sidebar-head"><i class="fas fa-chart-bar" style="color:var(--cyan);"></i> Your Submission Stats</div>
                <div class="submit-sidebar-body">
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                        <div style="text-align:center;padding:10px;background:var(--card2);border:1px solid var(--border);"><div style="font-family:'Oswald',sans-serif;font-size:18px;font-weight:700;color:var(--cyan);">7</div><div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:0.5px;">Submitted</div></div>
                        <div style="text-align:center;padding:10px;background:var(--card2);border:1px solid var(--border);"><div style="font-family:'Oswald',sans-serif;font-size:18px;font-weight:700;color:var(--green);">6</div><div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:0.5px;">Approved</div></div>
                        <div style="text-align:center;padding:10px;background:var(--card2);border:1px solid var(--border);"><div style="font-family:'Oswald',sans-serif;font-size:18px;font-weight:700;color:var(--yellow);">1</div><div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:0.5px;">Pending</div></div>
                        <div style="text-align:center;padding:10px;background:var(--card2);border:1px solid var(--border);"><div style="font-family:'Oswald',sans-serif;font-size:18px;font-weight:700;color:var(--orange);">312</div><div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:0.5px;">Total Signs</div></div>
                    </div>
                </div>
            </div>

            <!-- Recent submissions -->
            <div class="submit-sidebar-card">
                <div class="submit-sidebar-head"><i class="fas fa-history" style="color:var(--dim);"></i> Recent Submissions</div>
                <div>
                    <div style="padding:10px 16px;border-bottom:1px solid var(--border2);display:flex;align-items:center;gap:10px;">
                        <div style="width:32px;height:32px;border-radius:8px;background:#191414;display:flex;align-items:center;justify-content:center;flex-shrink:0;"><img src="https://cdn.simpleicons.org/spotify/1ED760" width="18" height="18"></div>
                        <div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Spotify++ v8.9.12</div><div style="font-size:10px;color:var(--green);">● LIVE</div></div>
                        <div style="font-size:10px;color:var(--dim);">Feb 14</div>
                    </div>
                    <div style="padding:10px 16px;border-bottom:1px solid var(--border2);display:flex;align-items:center;gap:10px;">
                        <div style="width:32px;height:32px;border-radius:8px;background:#0d1117;display:flex;align-items:center;justify-content:center;flex-shrink:0;"><img src="https://cdn.simpleicons.org/discord/5865F2" width="18" height="18"></div>
                        <div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Discord++ v222.0</div><div style="font-size:10px;color:var(--green);">● LIVE</div></div>
                        <div style="font-size:10px;color:var(--dim);">Feb 10</div>
                    </div>
                    <div style="padding:10px 16px;display:flex;align-items:center;gap:10px;">
                        <div style="width:32px;height:32px;border-radius:8px;background:#010101;display:flex;align-items:center;justify-content:center;flex-shrink:0;"><img src="https://cdn.simpleicons.org/tiktok/ffffff" width="18" height="18"></div>
                        <div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">TikTok++ v33.2.0</div><div style="font-size:10px;color:var(--yellow);">● UNDER REVIEW</div></div>
                        <div style="font-size:10px;color:var(--dim);">Feb 19</div>
                    </div>
                </div>
            </div>

        </div><!-- /sidebar -->
    </div><!-- /ipa-submit-shell -->
</div><!-- /pg-submit-ipa -->

<!-- ════════════════════════════════
     TOAST CONTAINER
════════════════════════════════ -->
<div class="zs-toast-container" id="toast-container"></div>

<!-- ════════════════════════════════
     PM COMPOSE MODAL
════════════════════════════════ -->
<div class="zs-modal-overlay" id="modal-pm">
  <div class="zs-modal">
    <div class="zs-modal-head">
      <div class="zs-modal-title" style="color:#ff7a00;"><i class="fas fa-envelope" style="color:#ff7a00;"></i> Send Private Message</div>
      <button class="zs-modal-close" onclick="closeModal('modal-pm')"><i class="fas fa-times"></i></button>
    </div>
    <div class="zs-modal-body">
      <div class="pm-to-row">
        <div class="pm-to-av" id="pm-to-av" style="border-color:#ff7a00;color:#ff7a00;background:rgba(255,122,0,0.08);">iD</div>
        <div>
          <div class="pm-to-label">To</div>
          <div class="pm-to-name" id="pm-to-name" style="color:#ff7a00;">iOS_Dev</div>
        </div>
      </div>
      <div class="zs-form-group">
        <label class="zs-label"><i class="fas fa-heading"></i> Subject</label>
        <input class="zs-input" id="pm-subject" placeholder="Message subject..." type="text"/>
      </div>
      <div class="zs-form-group">
        <label class="zs-label"><i class="fas fa-align-left"></i> Message</label>
        <textarea class="zs-textarea" id="pm-body" placeholder="Write your message here...&#10;&#10;You can use @username to mention users." style="min-height:120px;"></textarea>
      </div>
      <div style="display:flex;gap:8px;font-size:11px;color:#445566;">
        <span><i class="fas fa-shield-alt"></i> Messages are private</span>
        <span style="margin-left:auto;"><i class="fas fa-clock"></i> Delivered instantly</span>
      </div>
    </div>
    <div class="zs-modal-footer">
      <button class="zs-btn secondary" onclick="closeModal('modal-pm')">Cancel</button>
      <button class="zs-btn primary" onclick="sendPM()"><i class="fas fa-paper-plane"></i> Send Message</button>
    </div>
  </div>
</div>

<!-- ════════════════════════════════
     +REP MODAL
════════════════════════════════ -->
<div class="zs-modal-overlay" id="modal-rep">
  <div class="zs-modal zs-modal-sm">
    <div class="zs-modal-head">
      <div class="zs-modal-title" style="color:#00e87a;"><i class="fas fa-thumbs-up" style="color:#00e87a;"></i> Give Reputation</div>
      <button class="zs-modal-close" onclick="closeModal('modal-rep')"><i class="fas fa-times"></i></button>
    </div>
    <div class="zs-modal-body">
      <div class="rep-user-card">
        <div class="rep-av" id="rep-av" style="border-color:#ff7a00;color:#ff7a00;background:rgba(255,122,0,0.08);">iD</div>
        <div>
          <div style="font-size:13px;font-weight:700;" id="rep-username">iOS_Dev</div>
          <div style="font-size:11px;color:#445566;">Current rep: <span class="rep-cur-val" id="rep-current">+841</span></div>
        </div>
      </div>
      <label class="zs-label" style="margin-bottom:8px;"><i class="fas fa-star"></i> Rep Type</label>
      <div class="rep-type-grid">
        <div class="rep-type-btn selected" onclick="selectRepType(this,'positive')">
          <i class="fas fa-thumbs-up" style="color:#00e87a;"></i>
          <span>Positive +1</span>
        </div>
        <div class="rep-type-btn" onclick="selectRepType(this,'negative')">
          <i class="fas fa-thumbs-down" style="color:#ff3333;"></i>
          <span>Negative -1</span>
        </div>
      </div>
      <div class="zs-form-group">
        <label class="zs-label"><i class="fas fa-comment"></i> Reason <span style="color:#2a3a4a;">(optional)</span></label>
        <input class="zs-input" id="rep-reason" placeholder="Why are you giving this rep?" type="text"/>
      </div>
    </div>
    <div class="zs-modal-footer">
      <button class="zs-btn secondary" onclick="closeModal('modal-rep')">Cancel</button>
      <button class="zs-btn success" onclick="submitRep()"><i class="fas fa-check"></i> Give Rep</button>
    </div>
  </div>
</div>

<!-- ════════════════════════════════
     VOUCH MODAL
════════════════════════════════ -->
<div class="zs-modal-overlay" id="modal-vouch">
  <div class="zs-modal">
    <div class="zs-modal-head">
      <div class="zs-modal-title" style="color:#9d5cff;"><i class="fas fa-shield-alt" style="color:#9d5cff;"></i> Leave a Vouch</div>
      <button class="zs-modal-close" onclick="closeModal('modal-vouch')"><i class="fas fa-times"></i></button>
    </div>
    <div class="zs-modal-body">
      <div class="rep-user-card" style="margin-bottom:16px;">
        <div class="rep-av" id="vouch-av" style="border-color:#ff7a00;color:#ff7a00;background:rgba(255,122,0,0.08);">iD</div>
        <div>
          <div style="font-size:13px;font-weight:700;" id="vouch-username">iOS_Dev</div>
          <div style="font-size:11px;color:#445566;"><i class="fas fa-shield-alt" style="color:#9d5cff;"></i> Vouching builds trust on the platform</div>
        </div>
      </div>
      <label class="zs-label" style="margin-bottom:8px;"><i class="fas fa-star"></i> Rating</label>
      <div class="vouch-stars" id="vouch-stars">
        <div class="vouch-star active" onclick="setVouchStars(1)">⭐</div>
        <div class="vouch-star active" onclick="setVouchStars(2)">⭐</div>
        <div class="vouch-star active" onclick="setVouchStars(3)">⭐</div>
        <div class="vouch-star active" onclick="setVouchStars(4)">⭐</div>
        <div class="vouch-star active" onclick="setVouchStars(5)">⭐</div>
      </div>
      <label class="zs-label" style="margin-bottom:8px;"><i class="fas fa-tags"></i> Tags</label>
      <div class="vouch-tags-grid">
        <div class="vouch-tag-btn" onclick="toggleVouchTag(this)">Reliable Builds</div>
        <div class="vouch-tag-btn" onclick="toggleVouchTag(this)">Clean Dylibs</div>
        <div class="vouch-tag-btn" onclick="toggleVouchTag(this)">Great Support</div>
        <div class="vouch-tag-btn" onclick="toggleVouchTag(this)">Fast Delivery</div>
        <div class="vouch-tag-btn" onclick="toggleVouchTag(this)">iOS 17 Tested</div>
        <div class="vouch-tag-btn" onclick="toggleVouchTag(this)">Trusted Encoder</div>
        <div class="vouch-tag-btn" onclick="toggleVouchTag(this)">No Malware</div>
        <div class="vouch-tag-btn" onclick="toggleVouchTag(this)">Active Member</div>
      </div>
      <div class="zs-form-group">
        <label class="zs-label"><i class="fas fa-quote-right"></i> Vouch Text <span style="color:#2a3a4a;">(optional)</span></label>
        <textarea class="zs-textarea" id="vouch-text" placeholder="Share your experience with this member..." style="min-height:80px;"></textarea>
      </div>
    </div>
    <div class="zs-modal-footer">
      <button class="zs-btn secondary" onclick="closeModal('modal-vouch')">Cancel</button>
      <button class="zs-btn" style="background:rgba(157,92,255,0.15);border:1px solid rgba(157,92,255,0.4);color:#9d5cff;" onclick="submitVouch()"><i class="fas fa-shield-alt"></i> Submit Vouch</button>
    </div>
  </div>
</div>

<!-- ════════════════════════════════
     REPORT MODAL
════════════════════════════════ -->
<div class="zs-modal-overlay" id="modal-report">
  <div class="zs-modal zs-modal-sm">
    <div class="zs-modal-head">
      <div class="zs-modal-title" style="color:#ff3333;"><i class="fas fa-flag" style="color:#ff3333;"></i> Report User</div>
      <button class="zs-modal-close" onclick="closeModal('modal-report')"><i class="fas fa-times"></i></button>
    </div>
    <div class="zs-modal-body">
      <div style="font-size:12px;color:#8899aa;margin-bottom:14px;">Reporting: <strong id="report-username" style="color:#e8ecf0;">iOS_Dev</strong></div>
      <label class="zs-label" style="margin-bottom:8px;"><i class="fas fa-list"></i> Reason</label>
      <div class="report-reason-list">
        <div class="report-reason selected" onclick="selectReportReason(this)">
          <div class="report-reason-dot"></div>
          <div class="report-reason-text">Spam or low-quality content</div>
        </div>
        <div class="report-reason" onclick="selectReportReason(this)">
          <div class="report-reason-dot"></div>
          <div class="report-reason-text">Malware / malicious IPA</div>
        </div>
        <div class="report-reason" onclick="selectReportReason(this)">
          <div class="report-reason-dot"></div>
          <div class="report-reason-text">Scam or impersonation</div>
        </div>
        <div class="report-reason" onclick="selectReportReason(this)">
          <div class="report-reason-dot"></div>
          <div class="report-reason-text">Harassment or abuse</div>
        </div>
        <div class="report-reason" onclick="selectReportReason(this)">
          <div class="report-reason-dot"></div>
          <div class="report-reason-text">Other violation</div>
        </div>
      </div>
      <div class="zs-form-group">
        <label class="zs-label"><i class="fas fa-align-left"></i> Additional Details</label>
        <textarea class="zs-textarea" id="report-detail" placeholder="Provide any additional context..." style="min-height:70px;"></textarea>
      </div>
    </div>
    <div class="zs-modal-footer">
      <button class="zs-btn secondary" onclick="closeModal('modal-report')">Cancel</button>
      <button class="zs-btn danger" onclick="submitReport()"><i class="fas fa-flag"></i> Submit Report</button>
    </div>
  </div>
</div>

<!-- ════════════════════════════════
     INBOX / MESSAGE VIEW MODAL
════════════════════════════════ -->
<div class="zs-modal-overlay" id="modal-inbox">
  <div class="zs-modal zs-modal-lg">
    <div class="zs-modal-head">
      <div class="zs-modal-title"><i class="fas fa-inbox" style="color:#ff7a00;"></i> Inbox <span style="font-size:11px;color:#445566;font-weight:400;margin-left:4px;">2 unread</span></div>
      <div style="display:flex;gap:8px;align-items:center;">
        <button class="zs-btn primary" style="padding:5px 14px;font-size:11px;" onclick="closeModal('modal-inbox');openModal('modal-pm',{username:'',initials:''})"><i class="fas fa-plus"></i> New</button>
        <button class="zs-modal-close" onclick="closeModal('modal-inbox')"><i class="fas fa-times"></i></button>
      </div>
    </div>
    <div class="zs-modal-body" style="padding:0;">
      <div class="pm-inbox-list" style="padding:8px 0;">
        <div class="pm-inbox-row pm-inbox-unread" style="padding:12px 18px;" onclick="viewPM('ZEFv','ZE','var(--cyan)','#00d4ff','RE: TrustCore v4.2 compatibility','Hook offsets confirmed stable. The entitlement fix is huge — all 89 dylibs passing clean on my end. Let me know if you want me to test the new ARM64e builds.')">
          <div class="unread-dot"></div>
          <div class="pm-inbox-av" style="border-color:#00d4ff;color:#00d4ff;background:rgba(0,212,255,0.06);">ZE</div>
          <div class="pm-inbox-meta">
            <div class="pm-inbox-from">ZEFv</div>
            <div class="pm-inbox-subject">RE: TrustCore v4.2 compatibility</div>
          </div>
          <div class="pm-inbox-time">2h ago</div>
        </div>
        <div class="pm-inbox-row pm-inbox-unread" style="padding:12px 18px;" onclick="viewPM('Marshall','MA','var(--orange)','#ff7a00','Featured: Recall AI v2.1.0','Hey iOS_Dev — we\'re featuring your Recall AI release on the portal front page. 2.2k signs in 24hrs is insane. Keep it up.')">
          <div class="unread-dot"></div>
          <div class="pm-inbox-av" style="border-color:#ff7a00;color:#ff7a00;background:rgba(255,122,0,0.06);">MA</div>
          <div class="pm-inbox-meta">
            <div class="pm-inbox-from">Marshall</div>
            <div class="pm-inbox-subject">Featured: Recall AI v2.1.0</div>
          </div>
          <div class="pm-inbox-time">5h ago</div>
        </div>
        <div class="pm-inbox-row" style="padding:12px 18px;" onclick="viewPM('sipx','SI','var(--green)','#00e87a','IPA scan passed — Spotify++','All 5 dylibs verified clean. SHA-256 logged. Post approved for IPA Releases board.')">
          <div class="pm-inbox-av" style="border-color:#00e87a;color:#00e87a;background:rgba(0,232,122,0.06);">SI</div>
          <div class="pm-inbox-meta">
            <div class="pm-inbox-from">sipx</div>
            <div class="pm-inbox-subject">IPA scan passed — Spotify++</div>
          </div>
          <div class="pm-inbox-time">Feb 14</div>
        </div>
        <div class="pm-inbox-row" style="padding:12px 18px;" onclick="viewPM('n3wbie_42','n3','var(--grey)','#8899aa','Help with injection','Hey, how do I inject your dylib alongside the IPA? Is it just dragging it into the sign page?')">
          <div class="pm-inbox-av" style="border-color:#8899aa;color:#8899aa;background:rgba(136,153,170,0.06);">n3</div>
          <div class="pm-inbox-meta">
            <div class="pm-inbox-from">n3wbie_42</div>
            <div class="pm-inbox-subject">Help with injection</div>
          </div>
          <div class="pm-inbox-time">Feb 12</div>
        </div>
        <div class="pm-inbox-row" style="padding:12px 18px;" onclick="viewPM('xXDarkXx','xX','var(--pink)','#ff3dcd','Great Spotify build','Bro the Spotify++ just hits different — lyrics work, no ads, offline all working. Best build on the forum.')">
          <div class="pm-inbox-av" style="border-color:#ff3dcd;color:#ff3dcd;background:rgba(255,61,205,0.06);">xX</div>
          <div class="pm-inbox-meta">
            <div class="pm-inbox-from">xXDarkXx</div>
            <div class="pm-inbox-subject">Great Spotify build</div>
          </div>
          <div class="pm-inbox-time">Feb 10</div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ════════════════════════════════
     PM READ MODAL
════════════════════════════════ -->
<div class="zs-modal-overlay" id="modal-pm-read">
  <div class="zs-modal zs-modal-lg">
    <div class="zs-modal-head">
      <div style="display:flex;align-items:center;gap:10px;">
        <button class="zs-modal-close" onclick="closeModal('modal-pm-read');openModal('modal-inbox')" style="border:none;"><i class="fas fa-arrow-left"></i></button>
        <div class="zs-modal-title" id="pm-read-subject">Subject</div>
      </div>
      <button class="zs-modal-close" onclick="closeModal('modal-pm-read')"><i class="fas fa-times"></i></button>
    </div>
    <div class="zs-modal-body">
      <div class="rep-user-card" style="margin-bottom:16px;">
        <div class="rep-av" id="pm-read-av" style="border-color:#ff7a00;color:#ff7a00;">iD</div>
        <div>
          <div style="font-size:13px;font-weight:700;" id="pm-read-from">From</div>
          <div style="font-size:10px;color:#445566;" id="pm-read-time">Just now</div>
        </div>
        <button class="zs-btn secondary" style="margin-left:auto;padding:5px 12px;font-size:11px;" id="pm-read-reply-btn" onclick="replyToPM()"><i class="fas fa-reply"></i> Reply</button>
      </div>
      <div style="background:#060a0d;border:1px solid #131820;border-radius:3px;padding:14px;font-size:13px;color:#8899aa;line-height:1.7;" id="pm-read-body">
        Message body here.
      </div>
    </div>
  </div>
</div>

<!-- ════════════════════════════════
     NOTIFICATIONS DROPDOWN
════════════════════════════════ -->
<div class="notif-dropdown" id="notif-dropdown">
  <div class="notif-head">
    <span>Notifications</span>
    <span class="notif-mark-all" onclick="markAllRead()">Mark all read</span>
  </div>
  <div class="notif-row unread" onclick="handleNotif(this)">
    <div class="notif-icon" style="background:rgba(0,232,122,0.1);border:1px solid rgba(0,232,122,0.2);color:#00e87a;"><i class="fas fa-thumbs-up"></i></div>
    <div>
      <div class="notif-text"><strong>ZEFv</strong> gave you <strong>+Rep</strong> on your Recall AI post</div>
      <div class="notif-time">2 hours ago</div>
    </div>
    <div style="width:7px;height:7px;border-radius:50%;background:#ff7a00;flex-shrink:0;margin-top:4px;"></div>
  </div>
  <div class="notif-row unread" onclick="handleNotif(this)">
    <div class="notif-icon" style="background:rgba(255,122,0,0.1);border:1px solid rgba(255,122,0,0.2);color:#ff7a00;"><i class="fas fa-envelope"></i></div>
    <div>
      <div class="notif-text"><strong>Marshall</strong> sent you a <strong>private message</strong></div>
      <div class="notif-time">5 hours ago</div>
    </div>
    <div style="width:7px;height:7px;border-radius:50%;background:#ff7a00;flex-shrink:0;margin-top:4px;"></div>
  </div>
  <div class="notif-row" onclick="handleNotif(this)">
    <div class="notif-icon" style="background:rgba(157,92,255,0.1);border:1px solid rgba(157,92,255,0.2);color:#9d5cff;"><i class="fas fa-shield-alt"></i></div>
    <div>
      <div class="notif-text"><strong>sipx</strong> vouched for you — <em style="color:#445566;">"Trusted encoder"</em></div>
      <div class="notif-time">Feb 15</div>
    </div>
  </div>
  <div class="notif-row" onclick="handleNotif(this)">
    <div class="notif-icon" style="background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.15);color:#00d4ff;"><i class="fas fa-comment"></i></div>
    <div>
      <div class="notif-text"><strong>xXDarkXx</strong> replied to your <strong>Spotify++ post</strong></div>
      <div class="notif-time">Feb 14</div>
    </div>
  </div>
  <div class="notif-row" onclick="handleNotif(this)">
    <div class="notif-icon" style="background:rgba(255,208,0,0.1);border:1px solid rgba(255,208,0,0.2);color:#ffd000;"><i class="fas fa-star"></i></div>
    <div>
      <div class="notif-text">Your <strong>Recall AI v2.1.0</strong> post reached <strong>2,000 views</strong></div>
      <div class="notif-time">Feb 17</div>
    </div>
  </div>
  <div class="notif-row" onclick="handleNotif(this)">
    <div class="notif-icon" style="background:rgba(255,208,0,0.1);border:1px solid rgba(255,208,0,0.2);color:#ffd000;"><i class="fas fa-trophy"></i></div>
    <div>
      <div class="notif-text">Achievement unlocked: <strong>2 Years of Service</strong> 🎖️</div>
      <div class="notif-time">Feb 12</div>
    </div>
  </div>
  <div style="padding:8px 14px;border-top:1px solid #131820;">
    <a href="#" onclick="event.preventDefault();document.getElementById('notif-dropdown').classList.remove('open');notifOpen=false;openNotifPanel();" style="font-size:11px;color:#445566;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1px;" onmouseover="this.style.color='#ff7a00'" onmouseout="this.style.color='#445566'">View All Notifications →</a>
  </div>
</div>

<!-- ════════════════════════════════
     ADD FRIEND CONFIRM MODAL
════════════════════════════════ -->
<div class="zs-modal-overlay" id="modal-friend">
  <div class="zs-modal zs-modal-sm">
    <div class="zs-modal-head">
      <div class="zs-modal-title" style="color:#00d4ff;"><i class="fas fa-user-plus" style="color:#00d4ff;"></i> Add Friend</div>
      <button class="zs-modal-close" onclick="closeModal('modal-friend')"><i class="fas fa-times"></i></button>
    </div>
    <div class="zs-modal-body" style="text-align:center;padding:24px;">
      <div class="rep-av" id="friend-av" style="border-color:#ff7a00;color:#ff7a00;background:rgba(255,122,0,0.08);margin:0 auto 12px;width:52px;height:52px;font-size:18px;">iD</div>
      <div style="font-size:15px;font-weight:700;color:#fff;margin-bottom:6px;" id="friend-username">iOS_Dev</div>
      <div style="font-size:12px;color:#445566;margin-bottom:20px;">Send a friend request to this member?</div>
      <div style="display:flex;gap:8px;justify-content:center;">
        <button class="zs-btn secondary" onclick="closeModal('modal-friend')">Cancel</button>
        <button class="zs-btn" style="background:rgba(0,212,255,0.15);border:1px solid rgba(0,212,255,0.4);color:#00d4ff;" onclick="submitFriendReq()"><i class="fas fa-user-plus"></i> Send Request</button>
      </div>
    </div>
  </div>
</div>


<!-- ══════════════════════════════════════════════
     LOGIN MODAL
══════════════════════════════════════════════ -->
<div class="zs-modal-overlay" id="modal-login">
  <div class="zs-modal zs-modal-sm">
    <div class="zs-modal-head" style="border-bottom:2px solid var(--orange);">
      <div class="zs-modal-title" style="color:#fff;font-size:16px;letter-spacing:1px;">
        <i class="fas fa-sign-in-alt" style="color:var(--orange);"></i> SIGN IN TO MSIGN
      </div>
      <button class="zs-modal-close" onclick="closeModal('modal-login')"><i class="fas fa-times"></i></button>
    </div>
    <div class="zs-modal-body">
      <!-- Error banner -->
      <div id="login-error" style="display:none;background:rgba(204,0,0,.1);border:1px solid rgba(204,0,0,.3);border-left:3px solid var(--red);padding:9px 12px;margin-bottom:14px;font-size:12px;color:#ff5555;display:none;align-items:center;gap:8px;">
        <i class="fas fa-exclamation-circle"></i><span id="login-error-msg">Invalid username or password.</span>
      </div>

      <div class="zs-form-group">
        <label class="zs-label"><i class="fas fa-user" style="margin-right:4px;"></i>Username or Email</label>
        <input class="zs-input" id="login-user" type="text" placeholder="your_username" autocomplete="username" onkeydown="if(event.key==='Enter')doLogin()"/>
      </div>
      <div class="zs-form-group" style="margin-bottom:6px;">
        <label class="zs-label"><i class="fas fa-lock" style="margin-right:4px;"></i>Password</label>
        <div style="position:relative;">
          <input class="zs-input" id="login-pass" type="password" placeholder="••••••••" autocomplete="current-password" style="padding-right:38px;" onkeydown="if(event.key==='Enter')doLogin()"/>
          <button onclick="toggleLoginPass()" style="position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:#445566;cursor:pointer;font-size:12px;padding:0;" id="login-pass-eye"><i class="fas fa-eye"></i></button>
        </div>
      </div>
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;">
        <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:var(--grey);cursor:pointer;">
          <input type="checkbox" id="login-remember" style="accent-color:var(--orange);"/> Remember me
        </label>
        <a href="#" style="font-size:11px;color:var(--dim);font-family:'Oswald',sans-serif;letter-spacing:.5px;" onmouseover="this.style.color='var(--orange)'" onmouseout="this.style.color='var(--dim)'">FORGOT PASSWORD?</a>
      </div>
      <button class="zs-btn primary" style="width:100%;justify-content:center;font-size:14px;padding:11px;" onclick="doLogin()">
        <i class="fas fa-sign-in-alt"></i> SIGN IN
      </button>
      <div style="margin-top:16px;padding-top:14px;border-top:1px solid #1e2530;text-align:center;font-size:12px;color:var(--dim);">
        Don't have an account?
        <a href="#" style="color:var(--orange);font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.5px;margin-left:4px;" onclick="closeModal('modal-login');openModal('modal-register')">CREATE ONE</a>
      </div>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════════
     REGISTER MODAL
══════════════════════════════════════════════ -->
<div class="zs-modal-overlay" id="modal-register">
  <div class="zs-modal" style="width:420px;">
    <div class="zs-modal-head" style="border-bottom:2px solid var(--green);">
      <div class="zs-modal-title" style="color:#fff;font-size:16px;letter-spacing:1px;">
        <i class="fas fa-user-plus" style="color:var(--green);"></i> CREATE ACCOUNT
      </div>
      <button class="zs-modal-close" onclick="closeModal('modal-register')"><i class="fas fa-times"></i></button>
    </div>
    <div class="zs-modal-body">

      <!-- Error banner -->
      <div id="reg-error" style="display:none;background:rgba(204,0,0,.1);border:1px solid rgba(204,0,0,.3);border-left:3px solid var(--red);padding:9px 12px;margin-bottom:14px;font-size:12px;color:#ff5555;align-items:center;gap:8px;">
        <i class="fas fa-exclamation-circle"></i><span id="reg-error-msg"></span>
      </div>

      <!-- Avatar initials preview -->
      <div style="text-align:center;margin-bottom:18px;">
        <div id="reg-av-preview" style="width:52px;height:52px;border-radius:50%;background:rgba(0,204,85,.08);border:2px solid var(--green);display:flex;align-items:center;justify-content:center;font-family:'Oswald',sans-serif;font-size:18px;font-weight:700;color:var(--green);margin:0 auto 6px;">?</div>
        <div style="font-size:10px;color:var(--dim);font-family:'Oswald',sans-serif;letter-spacing:.5px;">PREVIEW</div>
      </div>

      <!-- Username -->
      <div class="zs-form-group">
        <label class="zs-label">Username <span style="color:var(--orange);">*</span></label>
        <input class="zs-input" id="reg-user" type="text" placeholder="cool_handle" maxlength="24" oninput="updateRegPreview()"/>
        <div id="reg-user-hint" style="font-size:10px;color:var(--dim);margin-top:3px;min-height:13px;"></div>
      </div>

      <!-- Email — auto-generated from username -->
      <div class="zs-form-group">
        <label class="zs-label" style="display:flex;align-items:center;justify-content:space-between;">
          <span>Email <span style="color:var(--orange);">*</span></span>
          <span id="reg-email-auto-badge" style="display:none;background:rgba(255,136,0,.12);color:var(--orange);border:1px solid rgba(255,136,0,.3);font-size:8px;font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.5px;padding:1px 6px;">AUTO-GENERATED</span>
        </label>
        <input class="zs-input" id="reg-email" type="email" placeholder="will fill from username" oninput="onRegEmailInput()"/>
        <div id="reg-email-hint" style="font-size:10px;color:var(--dim);margin-top:3px;min-height:13px;">Type your username above to auto-fill</div>
      </div>

      <!-- MDID -->
      <div class="zs-form-group">
        <label class="zs-label" style="display:flex;align-items:center;justify-content:space-between;">
          <span>MDID <span style="color:var(--dim);font-size:9px;font-family:'Rajdhani',sans-serif;letter-spacing:0;font-weight:400;text-transform:none;">— your device identifier</span></span>
          <span id="reg-mdid-badge" style="display:none;background:rgba(0,204,85,.12);color:var(--green);border:1px solid rgba(0,204,85,.3);font-size:8px;font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.5px;padding:1px 6px;">AUTO-FETCHED</span>
        </label>
        <div style="display:flex;gap:0;">
          <input class="zs-input" id="reg-mdid" type="text" placeholder="MS-XXXX-XX" maxlength="12"
            style="font-family:'JetBrains Mono',monospace;font-size:12px;border-right:none;flex:1;letter-spacing:.5px;"
            oninput="onRegMdidInput()"/>
          <button onclick="regFetchMDID()" id="reg-mdid-btn"
            style="background:var(--card2);border:1px solid var(--border);border-left:none;color:var(--orange);padding:0 14px;font-family:'Oswald',sans-serif;font-size:11px;font-weight:700;letter-spacing:.5px;cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0;"
            onmouseover="this.style.background='rgba(255,136,0,.1)'" onmouseout="this.style.background='var(--card2)'">
            <i class="fas fa-magic" style="font-size:9px;margin-right:3px;"></i>FETCH
          </button>
        </div>
        <div id="reg-mdid-hint" style="font-size:10px;color:var(--dim);margin-top:3px;min-height:13px;">Found on your device under Settings → MSIGN · format: MS-XXXX-XX</div>
      </div>

      <!-- Passwords -->
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
        <div class="zs-form-group" style="margin-bottom:0;">
          <label class="zs-label">Password <span style="color:var(--orange);">*</span></label>
          <div style="position:relative;">
            <input class="zs-input" id="reg-pass1" type="password" placeholder="Min. 8 chars" style="padding-right:34px;" oninput="checkRegPass()"/>
            <button onclick="toggleField('reg-pass1',this)" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#445566;cursor:pointer;font-size:11px;padding:0;"><i class="fas fa-eye"></i></button>
          </div>
          <div style="display:flex;gap:3px;margin-top:5px;">
            <div id="rsb1" style="height:3px;flex:1;border-radius:2px;background:#1e2530;transition:background .3s;"></div>
            <div id="rsb2" style="height:3px;flex:1;border-radius:2px;background:#1e2530;transition:background .3s;"></div>
            <div id="rsb3" style="height:3px;flex:1;border-radius:2px;background:#1e2530;transition:background .3s;"></div>
            <div id="rsb4" style="height:3px;flex:1;border-radius:2px;background:#1e2530;transition:background .3s;"></div>
            <div id="rsb5" style="height:3px;flex:1;border-radius:2px;background:#1e2530;transition:background .3s;"></div>
          </div>
          <div id="reg-pass-label" style="font-size:10px;color:var(--dim);margin-top:2px;">—</div>
        </div>
        <div class="zs-form-group" style="margin-bottom:0;">
          <label class="zs-label">Confirm Password <span style="color:var(--orange);">*</span></label>
          <div style="position:relative;">
            <input class="zs-input" id="reg-pass2" type="password" placeholder="Repeat" style="padding-right:34px;" oninput="checkRegMatch()"/>
            <button onclick="toggleField('reg-pass2',this)" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#445566;cursor:pointer;font-size:11px;padding:0;"><i class="fas fa-eye"></i></button>
          </div>
          <div id="reg-match-hint" style="font-size:10px;color:var(--dim);margin-top:5px;min-height:13px;"></div>
        </div>
      </div>
      <div style="height:14px;"></div>

      <!-- Terms -->
      <label style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--grey);cursor:pointer;margin-bottom:16px;line-height:1.5;">
        <input type="checkbox" id="reg-terms" style="accent-color:var(--green);margin-top:2px;flex-shrink:0;"/>
        I agree to the <a href="#" style="color:var(--orange);" onclick="event.stopPropagation()">Terms of Service</a>&nbsp;and&nbsp;<a href="#" style="color:var(--orange);" onclick="event.stopPropagation()">Rules</a>
      </label>

      <button class="zs-btn" style="background:var(--green);color:#000;width:100%;justify-content:center;font-size:14px;padding:11px;" onclick="doRegister()">
        <i class="fas fa-user-plus"></i> CREATE ACCOUNT
      </button>
      <div style="margin-top:16px;padding-top:14px;border-top:1px solid #1e2530;text-align:center;font-size:12px;color:var(--dim);">
        Already have an account?
        <a href="#" style="color:var(--orange);font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.5px;margin-left:4px;" onclick="closeModal('modal-register');openModal('modal-login')">SIGN IN</a>
      </div>
    </div>
  </div>
</div>

<!-- PROFILE AVATAR UPLOAD MODAL -->
<div id="prof-av-modal">
  <div class="av-modal-box">
    <h4><i class="fas fa-camera"></i> Change Profile Picture</h4>
    <div class="av-modal-preview" id="av-modal-preview-el">iD</div>
    <label class="av-modal-upload-btn">
      <i class="fas fa-upload"></i> Upload from Device
      <input type="file" accept="image/*" id="av-file-input" style="display:none;" onchange="avModalFileChosen(this)">
    </label>
    <div class="av-modal-sep">— or paste URL —</div>
    <input class="av-modal-url-input" id="av-modal-url" placeholder="https://i.imgur.com/example.jpg" type="text" oninput="avModalUrlPreview(this.value)"/>
    <div class="av-modal-actions">
      <button class="av-modal-reset" onclick="avModalReset()"><i class="fas fa-trash"></i></button>
      <button class="av-modal-cancel" onclick="closeAvModal()">Cancel</button>
      <button class="av-modal-apply" onclick="avModalApply()"><i class="fas fa-check"></i> Apply</button>
    </div>
  </div>
</div>


<!-- ══════════════════════════════════════════════════════
     USER CONTROL PANEL (UCP)
════════════════════════════════════════════════════════ -->
<!-- ════════════════════════════════
     NOTIFICATIONS PANEL
════════════════════════════════ -->
<div id="notif-overlay" class="cp-overlay">
<div class="cp-shell">

  <div class="cp-header">
    <div class="cp-header-icon"><i class="fas fa-bell"></i></div>
    <div>
      <div class="cp-header-title">Notifications</div>
      <div class="cp-header-sub">Your activity feed and alerts</div>
    </div>
    <button class="cp-close-btn" onclick="closeNotifPanel()"><i class="fas fa-times"></i> Close</button>
  </div>

  <div class="cp-layout">

    <!-- Sidebar -->
    <div class="cp-nav">
      <div class="cp-nav-section">Filter</div>
      <div class="cp-nav-item active" onclick="notifPane('notif-all',this)"><i class="fas fa-list"></i> All <span class="cp-link-badge">6</span></div>
      <div class="cp-nav-item" onclick="notifPane('notif-unread',this)"><i class="fas fa-circle" style="font-size:8px;"></i> Unread <span class="cp-link-badge">2</span></div>
      <div class="cp-nav-item" onclick="notifPane('notif-mentions',this)"><i class="fas fa-at"></i> Mentions</div>
      <div class="cp-nav-item" onclick="notifPane('notif-reps',this)"><i class="fas fa-thumbs-up"></i> Rep</div>
      <div class="cp-nav-item" onclick="notifPane('notif-system',this)"><i class="fas fa-cog"></i> System</div>
      <div class="cp-nav-section">Actions</div>
      <div class="cp-nav-item" onclick="markAllRead();showToast('success','Done','All notifications marked read.')"><i class="fas fa-check-double"></i> Mark All Read</div>
      <div class="cp-nav-item" onclick="showToast('info','Settings','Notification settings coming soon.')"><i class="fas fa-sliders-h"></i> Settings</div>
    </div>

    <!-- Content -->
    <div>

      <!-- ALL -->
      <div class="cp-pane active" id="notif-all">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-list"></i> All Notifications</div>
          <div style="padding:0;">
            <div class="notif-panel-row unread" onclick="this.classList.remove('unread');this.querySelector('.notif-panel-dot').style.display='none';">
              <div class="notif-panel-icon" style="background:rgba(0,232,122,0.1);border:1px solid rgba(0,232,122,0.2);color:#00e87a;"><i class="fas fa-thumbs-up"></i></div>
              <div class="notif-panel-body">
                <div class="notif-panel-text"><strong>ZEFv</strong> gave you <strong>+Rep</strong> on your Recall AI post</div>
                <div class="notif-panel-time"><i class="fas fa-clock" style="margin-right:4px;opacity:0.5;"></i>2 hours ago</div>
              </div>
              <div class="notif-panel-dot"></div>
            </div>
            <div class="notif-panel-row unread" onclick="this.classList.remove('unread');this.querySelector('.notif-panel-dot').style.display='none';closeNotifPanel();openPMPanel();">
              <div class="notif-panel-icon" style="background:rgba(255,122,0,0.1);border:1px solid rgba(255,122,0,0.2);color:#ff7a00;"><i class="fas fa-envelope"></i></div>
              <div class="notif-panel-body">
                <div class="notif-panel-text"><strong>Marshall</strong> sent you a <strong>private message</strong></div>
                <div class="notif-panel-time"><i class="fas fa-clock" style="margin-right:4px;opacity:0.5;"></i>5 hours ago</div>
              </div>
              <div class="notif-panel-dot"></div>
            </div>
            <div class="notif-panel-row" onclick="">
              <div class="notif-panel-icon" style="background:rgba(157,92,255,0.1);border:1px solid rgba(157,92,255,0.2);color:#9d5cff;"><i class="fas fa-shield-alt"></i></div>
              <div class="notif-panel-body">
                <div class="notif-panel-text"><strong>sipx</strong> vouched for you — <em style="color:var(--dim);">"Trusted encoder"</em></div>
                <div class="notif-panel-time"><i class="fas fa-clock" style="margin-right:4px;opacity:0.5;"></i>Feb 15</div>
              </div>
            </div>
            <div class="notif-panel-row" onclick="">
              <div class="notif-panel-icon" style="background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.15);color:#00d4ff;"><i class="fas fa-comment"></i></div>
              <div class="notif-panel-body">
                <div class="notif-panel-text"><strong>xXDarkXx</strong> replied to your <strong>Spotify++ post</strong></div>
                <div class="notif-panel-time"><i class="fas fa-clock" style="margin-right:4px;opacity:0.5;"></i>Feb 14</div>
              </div>
            </div>
            <div class="notif-panel-row" onclick="">
              <div class="notif-panel-icon" style="background:rgba(255,208,0,0.1);border:1px solid rgba(255,208,0,0.2);color:#ffd000;"><i class="fas fa-star"></i></div>
              <div class="notif-panel-body">
                <div class="notif-panel-text">Your <strong>Recall AI v2.1.0</strong> post reached <strong>2,000 views</strong></div>
                <div class="notif-panel-time"><i class="fas fa-clock" style="margin-right:4px;opacity:0.5;"></i>Feb 13</div>
              </div>
            </div>
            <div class="notif-panel-row" onclick="">
              <div class="notif-panel-icon" style="background:rgba(255,208,0,0.1);border:1px solid rgba(255,208,0,0.2);color:#ffd000;"><i class="fas fa-trophy"></i></div>
              <div class="notif-panel-body">
                <div class="notif-panel-text">Achievement unlocked: <strong>2 Years of Service</strong> 🎖️</div>
                <div class="notif-panel-time"><i class="fas fa-clock" style="margin-right:4px;opacity:0.5;"></i>Feb 12</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- UNREAD -->
      <div class="cp-pane" id="notif-unread">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-circle" style="font-size:9px;"></i> Unread</div>
          <div style="padding:0;">
            <div class="notif-panel-row unread" onclick="this.classList.remove('unread');this.querySelector('.notif-panel-dot').style.display='none';">
              <div class="notif-panel-icon" style="background:rgba(0,232,122,0.1);border:1px solid rgba(0,232,122,0.2);color:#00e87a;"><i class="fas fa-thumbs-up"></i></div>
              <div class="notif-panel-body">
                <div class="notif-panel-text"><strong>ZEFv</strong> gave you <strong>+Rep</strong> on your Recall AI post</div>
                <div class="notif-panel-time">2 hours ago</div>
              </div>
              <div class="notif-panel-dot"></div>
            </div>
            <div class="notif-panel-row unread" onclick="this.classList.remove('unread');this.querySelector('.notif-panel-dot').style.display='none';">
              <div class="notif-panel-icon" style="background:rgba(255,122,0,0.1);border:1px solid rgba(255,122,0,0.2);color:#ff7a00;"><i class="fas fa-envelope"></i></div>
              <div class="notif-panel-body">
                <div class="notif-panel-text"><strong>Marshall</strong> sent you a <strong>private message</strong></div>
                <div class="notif-panel-time">5 hours ago</div>
              </div>
              <div class="notif-panel-dot"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- MENTIONS -->
      <div class="cp-pane" id="notif-mentions">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-at"></i> Mentions</div>
          <div style="padding:0;">
            <div class="notif-panel-row">
              <div class="notif-panel-icon" style="background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.15);color:#00d4ff;"><i class="fas fa-at"></i></div>
              <div class="notif-panel-body">
                <div class="notif-panel-text"><strong>ZEFv</strong> mentioned you in <strong>TrustCore v4.2 thread</strong></div>
                <div class="notif-panel-time">Feb 14</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- REP -->
      <div class="cp-pane" id="notif-reps">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-thumbs-up"></i> Rep Activity</div>
          <div style="padding:0;">
            <div class="notif-panel-row unread" onclick="this.classList.remove('unread');this.querySelector('.notif-panel-dot').style.display='none';">
              <div class="notif-panel-icon" style="background:rgba(0,232,122,0.1);border:1px solid rgba(0,232,122,0.2);color:#00e87a;"><i class="fas fa-thumbs-up"></i></div>
              <div class="notif-panel-body">
                <div class="notif-panel-text"><strong>ZEFv</strong> gave you <strong>+Rep</strong> on your Recall AI post</div>
                <div class="notif-panel-time">2 hours ago</div>
              </div>
              <div class="notif-panel-dot"></div>
            </div>
            <div class="notif-panel-row">
              <div class="notif-panel-icon" style="background:rgba(0,232,122,0.1);border:1px solid rgba(0,232,122,0.2);color:#00e87a;"><i class="fas fa-thumbs-up"></i></div>
              <div class="notif-panel-body">
                <div class="notif-panel-text"><strong>sipx</strong> gave you <strong>+Rep</strong> on your Spotify++ build</div>
                <div class="notif-panel-time">Feb 13</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- SYSTEM -->
      <div class="cp-pane" id="notif-system">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-cog"></i> System</div>
          <div style="padding:0;">
            <div class="notif-panel-row">
              <div class="notif-panel-icon" style="background:rgba(255,208,0,0.1);border:1px solid rgba(255,208,0,0.2);color:#ffd000;"><i class="fas fa-trophy"></i></div>
              <div class="notif-panel-body">
                <div class="notif-panel-text">Achievement unlocked: <strong>2 Years of Service</strong> 🎖️</div>
                <div class="notif-panel-time">Feb 12</div>
              </div>
            </div>
            <div class="notif-panel-row">
              <div class="notif-panel-icon" style="background:rgba(255,208,0,0.1);border:1px solid rgba(255,208,0,0.2);color:#ffd000;"><i class="fas fa-star"></i></div>
              <div class="notif-panel-body">
                <div class="notif-panel-text">Your <strong>Recall AI v2.1.0</strong> post reached <strong>2,000 views</strong></div>
                <div class="notif-panel-time">Feb 13</div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div><!-- /cp-shell -->
</div><!-- /notif-overlay -->

<!-- ════════════════════════════════
     PRIVATE MESSAGES PANEL
════════════════════════════════ -->
<div id="pm-overlay" class="cp-overlay">
<div class="cp-shell">

  <div class="cp-header">
    <div class="cp-header-icon"><i class="fas fa-envelope"></i></div>
    <div>
      <div class="cp-header-title">Private Messages</div>
      <div class="cp-header-sub">2 unread messages</div>
    </div>
    <button class="cp-close-btn" onclick="closePMPanel()"><i class="fas fa-times"></i> Close</button>
  </div>

  <div class="cp-layout">

    <!-- Sidebar -->
    <div class="cp-nav">
      <div class="cp-nav-section">Folder</div>
      <div class="cp-nav-item active" onclick="pmPane('pm-inbox',this)"><i class="fas fa-inbox"></i> Inbox <span class="cp-link-badge">2</span></div>
      <div class="cp-nav-item" onclick="pmPane('pm-sent',this)"><i class="fas fa-paper-plane"></i> Sent</div>
      <div class="cp-nav-item" onclick="pmPane('pm-compose',this)"><i class="fas fa-plus"></i> Compose</div>
      <div class="cp-nav-section">Options</div>
      <div class="cp-nav-item" onclick="showToast('info','Settings','PM settings coming soon.')"><i class="fas fa-sliders-h"></i> Settings</div>
    </div>

    <!-- Content -->
    <div>

      <!-- INBOX -->
      <div class="cp-pane active" id="pm-inbox">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-inbox"></i> Inbox</div>
          <div style="padding:0;">
            <div class="pm-panel-row unread" onclick="pmPane('pm-read-1',document.querySelector('#pm-overlay .cp-nav-item.active'))">
              <div class="pm-panel-unread-dot"></div>
              <div class="pm-panel-av" style="border-color:#00d4ff;color:#00d4ff;background:rgba(0,212,255,0.06);">ZE</div>
              <div class="pm-panel-meta">
                <div class="pm-panel-from">ZEFv</div>
                <div class="pm-panel-subject">RE: TrustCore v4.2 compatibility</div>
              </div>
              <div class="pm-panel-time">2h ago</div>
            </div>
            <div class="pm-panel-row unread" onclick="pmPane('pm-read-2',document.querySelector('#pm-overlay .cp-nav-item.active'))">
              <div class="pm-panel-unread-dot"></div>
              <div class="pm-panel-av" style="border-color:#ff7a00;color:#ff7a00;background:rgba(255,122,0,0.06);">MA</div>
              <div class="pm-panel-meta">
                <div class="pm-panel-from">Marshall</div>
                <div class="pm-panel-subject">Featured: Recall AI v2.1.0</div>
              </div>
              <div class="pm-panel-time">5h ago</div>
            </div>
            <div class="pm-panel-row" onclick="pmPane('pm-read-3',document.querySelector('#pm-overlay .cp-nav-item.active'))">
              <div class="pm-panel-av" style="border-color:#00e87a;color:#00e87a;background:rgba(0,232,122,0.06);">SI</div>
              <div class="pm-panel-meta">
                <div class="pm-panel-from">sipx</div>
                <div class="pm-panel-subject">IPA scan passed — Spotify++</div>
              </div>
              <div class="pm-panel-time">Feb 14</div>
            </div>
            <div class="pm-panel-row" onclick="pmPane('pm-read-4',document.querySelector('#pm-overlay .cp-nav-item.active'))">
              <div class="pm-panel-av" style="border-color:#8899aa;color:#8899aa;background:rgba(136,153,170,0.06);">n3</div>
              <div class="pm-panel-meta">
                <div class="pm-panel-from">n3wbie_42</div>
                <div class="pm-panel-subject">Help with injection</div>
              </div>
              <div class="pm-panel-time">Feb 12</div>
            </div>
            <div class="pm-panel-row" onclick="pmPane('pm-read-5',document.querySelector('#pm-overlay .cp-nav-item.active'))">
              <div class="pm-panel-av" style="border-color:#ff3dcd;color:#ff3dcd;background:rgba(255,61,205,0.06);">xX</div>
              <div class="pm-panel-meta">
                <div class="pm-panel-from">xXDarkXx</div>
                <div class="pm-panel-subject">Great Spotify build</div>
              </div>
              <div class="pm-panel-time">Feb 10</div>
            </div>
          </div>
        </div>
      </div>

      <!-- READ VIEWS -->
      <div class="cp-pane" id="pm-read-1">
        <div class="cp-card">
          <div class="cp-card-head" style="display:flex;align-items:center;gap:10px;">
            <button onclick="pmPane('pm-inbox',null)" style="background:transparent;border:none;color:var(--dim);cursor:pointer;font-size:13px;padding:0;"><i class="fas fa-arrow-left"></i></button>
            <i class="fas fa-envelope"></i> RE: TrustCore v4.2 compatibility
          </div>
          <div class="cp-card-body">
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border2);">
              <div class="pm-panel-av" style="border-color:#00d4ff;color:#00d4ff;background:rgba(0,212,255,0.06);width:40px;height:40px;font-size:14px;">ZE</div>
              <div><div style="font-size:13px;font-weight:700;color:#fff;">ZEFv</div><div style="font-size:10px;color:var(--dim);">2 hours ago</div></div>
              <button class="cp-btn secondary" style="margin-left:auto;" onclick="pmPane('pm-compose',null);document.getElementById('pm-compose-to').value='ZEFv'"><i class="fas fa-reply"></i> Reply</button>
            </div>
            <div style="font-size:13px;color:var(--grey);line-height:1.8;background:var(--card2);border:1px solid var(--border2);padding:14px;border-radius:3px;">Hook offsets confirmed stable. The entitlement fix is huge — all 89 dylibs passing clean on my end. Let me know if you want me to test the new ARM64e builds.</div>
          </div>
        </div>
      </div>

      <div class="cp-pane" id="pm-read-2">
        <div class="cp-card">
          <div class="cp-card-head" style="display:flex;align-items:center;gap:10px;">
            <button onclick="pmPane('pm-inbox',null)" style="background:transparent;border:none;color:var(--dim);cursor:pointer;font-size:13px;padding:0;"><i class="fas fa-arrow-left"></i></button>
            <i class="fas fa-envelope"></i> Featured: Recall AI v2.1.0
          </div>
          <div class="cp-card-body">
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border2);">
              <div class="pm-panel-av" style="border-color:#ff7a00;color:#ff7a00;background:rgba(255,122,0,0.06);width:40px;height:40px;font-size:14px;">MA</div>
              <div><div style="font-size:13px;font-weight:700;color:#fff;">Marshall</div><div style="font-size:10px;color:var(--dim);">5 hours ago</div></div>
              <button class="cp-btn secondary" style="margin-left:auto;" onclick="pmPane('pm-compose',null);document.getElementById('pm-compose-to').value='Marshall'"><i class="fas fa-reply"></i> Reply</button>
            </div>
            <div style="font-size:13px;color:var(--grey);line-height:1.8;background:var(--card2);border:1px solid var(--border2);padding:14px;border-radius:3px;">Hey iOS_Dev — we're featuring your Recall AI release on the portal front page. 2.2k signs in 24hrs is insane. Keep it up.</div>
          </div>
        </div>
      </div>

      <div class="cp-pane" id="pm-read-3">
        <div class="cp-card">
          <div class="cp-card-head" style="display:flex;align-items:center;gap:10px;">
            <button onclick="pmPane('pm-inbox',null)" style="background:transparent;border:none;color:var(--dim);cursor:pointer;font-size:13px;padding:0;"><i class="fas fa-arrow-left"></i></button>
            <i class="fas fa-envelope"></i> IPA scan passed — Spotify++
          </div>
          <div class="cp-card-body">
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border2);">
              <div class="pm-panel-av" style="border-color:#00e87a;color:#00e87a;background:rgba(0,232,122,0.06);width:40px;height:40px;font-size:14px;">SI</div>
              <div><div style="font-size:13px;font-weight:700;color:#fff;">sipx</div><div style="font-size:10px;color:var(--dim);">Feb 14</div></div>
              <button class="cp-btn secondary" style="margin-left:auto;" onclick="pmPane('pm-compose',null);document.getElementById('pm-compose-to').value='sipx'"><i class="fas fa-reply"></i> Reply</button>
            </div>
            <div style="font-size:13px;color:var(--grey);line-height:1.8;background:var(--card2);border:1px solid var(--border2);padding:14px;border-radius:3px;">All 5 dylibs verified clean. SHA-256 logged. Post approved for IPA Releases board.</div>
          </div>
        </div>
      </div>

      <div class="cp-pane" id="pm-read-4">
        <div class="cp-card">
          <div class="cp-card-head" style="display:flex;align-items:center;gap:10px;">
            <button onclick="pmPane('pm-inbox',null)" style="background:transparent;border:none;color:var(--dim);cursor:pointer;font-size:13px;padding:0;"><i class="fas fa-arrow-left"></i></button>
            <i class="fas fa-envelope"></i> Help with injection
          </div>
          <div class="cp-card-body">
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border2);">
              <div class="pm-panel-av" style="border-color:#8899aa;color:#8899aa;background:rgba(136,153,170,0.06);width:40px;height:40px;font-size:14px;">n3</div>
              <div><div style="font-size:13px;font-weight:700;color:#fff;">n3wbie_42</div><div style="font-size:10px;color:var(--dim);">Feb 12</div></div>
              <button class="cp-btn secondary" style="margin-left:auto;" onclick="pmPane('pm-compose',null);document.getElementById('pm-compose-to').value='n3wbie_42'"><i class="fas fa-reply"></i> Reply</button>
            </div>
            <div style="font-size:13px;color:var(--grey);line-height:1.8;background:var(--card2);border:1px solid var(--border2);padding:14px;border-radius:3px;">Hey, how do I inject your dylib alongside the IPA? Is it just dragging it into the sign page?</div>
          </div>
        </div>
      </div>

      <div class="cp-pane" id="pm-read-5">
        <div class="cp-card">
          <div class="cp-card-head" style="display:flex;align-items:center;gap:10px;">
            <button onclick="pmPane('pm-inbox',null)" style="background:transparent;border:none;color:var(--dim);cursor:pointer;font-size:13px;padding:0;"><i class="fas fa-arrow-left"></i></button>
            <i class="fas fa-envelope"></i> Great Spotify build
          </div>
          <div class="cp-card-body">
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border2);">
              <div class="pm-panel-av" style="border-color:#ff3dcd;color:#ff3dcd;background:rgba(255,61,205,0.06);width:40px;height:40px;font-size:14px;">xX</div>
              <div><div style="font-size:13px;font-weight:700;color:#fff;">xXDarkXx</div><div style="font-size:10px;color:var(--dim);">Feb 10</div></div>
              <button class="cp-btn secondary" style="margin-left:auto;" onclick="pmPane('pm-compose',null);document.getElementById('pm-compose-to').value='xXDarkXx'"><i class="fas fa-reply"></i> Reply</button>
            </div>
            <div style="font-size:13px;color:var(--grey);line-height:1.8;background:var(--card2);border:1px solid var(--border2);padding:14px;border-radius:3px;">Bro the Spotify++ just hits different — lyrics work, no ads, offline all working. Best build on the forum.</div>
          </div>
        </div>
      </div>

      <!-- SENT -->
      <div class="cp-pane" id="pm-sent">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-paper-plane"></i> Sent Messages</div>
          <div style="padding:0;">
            <div class="pm-panel-row">
              <div class="pm-panel-av" style="border-color:#00d4ff;color:#00d4ff;background:rgba(0,212,255,0.06);">ZE</div>
              <div class="pm-panel-meta">
                <div class="pm-panel-from">To: ZEFv</div>
                <div class="pm-panel-subject">TrustCore v4.2 compatibility</div>
              </div>
              <div class="pm-panel-time">Feb 18</div>
            </div>
            <div class="pm-panel-row">
              <div class="pm-panel-av" style="border-color:#00e87a;color:#00e87a;background:rgba(0,232,122,0.06);">SI</div>
              <div class="pm-panel-meta">
                <div class="pm-panel-from">To: sipx</div>
                <div class="pm-panel-subject">Spotify++ dylib list</div>
              </div>
              <div class="pm-panel-time">Feb 13</div>
            </div>
          </div>
        </div>
      </div>

      <!-- COMPOSE -->
      <div class="cp-pane" id="pm-compose">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-plus"></i> New Message</div>
          <div class="cp-card-body">
            <div class="cp-form-row">
              <div class="cp-label">To</div>
              <input class="cp-input" id="pm-compose-to" placeholder="Username..."/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Subject</div>
              <input class="cp-input" id="pm-compose-subject" placeholder="Message subject..."/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Message</div>
              <textarea class="cp-textarea" id="pm-compose-body" placeholder="Write your message..." style="min-height:120px;"></textarea>
            </div>
            <div class="cp-btn-row">
              <button class="cp-btn primary" onclick="showToast('success','Sent','Your message has been sent.');pmPane('pm-inbox',null);"><i class="fas fa-paper-plane"></i> Send</button>
              <button class="cp-btn secondary" onclick="pmPane('pm-inbox',null)">Cancel</button>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div><!-- /cp-shell -->
</div><!-- /pm-overlay -->


<div id="ucp-overlay" class="cp-overlay">
<div class="cp-shell">

  <!-- Header -->
  <div class="cp-header">
    <div class="cp-header-icon orange"><i class="fas fa-user-cog"></i></div>
    <div>
      <div class="cp-header-title">User Control Panel</div>
      <div class="cp-header-sub">Manage your account, profile, and preferences</div>
    </div>
    <button class="cp-close-btn" onclick="closeUCP()"><i class="fas fa-times"></i> Close</button>
  </div>

  <div class="cp-layout">

    <!-- Sidebar -->
    <div class="cp-nav" id="ucp-nav">
      <div class="cp-nav-section">Profile</div>
      <div class="cp-nav-item active" onclick="ucpPane('ucp-profile')"><i class="fas fa-id-card"></i> Profile Info</div>
      <div class="cp-nav-item" onclick="ucpPane('ucp-avatar')"><i class="fas fa-camera"></i> Avatar &amp; Banner</div>
      <div class="cp-nav-item" onclick="ucpPane('ucp-sig')"><i class="fas fa-signature"></i> Signature</div>

      <div class="cp-nav-section">Account</div>
      <div class="cp-nav-item" onclick="ucpPane('ucp-account')"><i class="fas fa-key"></i> Account Settings</div>
      <div class="cp-nav-item" onclick="ucpPane('ucp-privacy')"><i class="fas fa-lock"></i> Privacy</div>
      <div class="cp-nav-item" onclick="ucpPane('ucp-notifs')"><i class="fas fa-bell"></i> Notifications</div>

      <div class="cp-nav-section">Content</div>
      <div class="cp-nav-item" onclick="ucpPane('ucp-posts')"><i class="fas fa-comments"></i> My Posts <span class="cp-link-badge">12</span></div>
      <div class="cp-nav-item" onclick="ucpPane('ucp-ipas')"><i class="fas fa-box-open"></i> My IPAs</div>
      <div class="cp-nav-item" onclick="ucpPane('ucp-friends')"><i class="fas fa-users"></i> Friends</div>
    </div>

    <!-- Content -->
    <div>

      <!-- ── PROFILE INFO ── -->
      <div class="cp-pane active" id="ucp-profile">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-id-card"></i> Profile Information</div>
          <div class="cp-card-body">
            <div class="cp-form-row">
              <div class="cp-label">Display Name<span class="cp-label-sub">Shown on posts</span></div>
              <input class="cp-input" value="iOS_Dev" id="ucp-displayname"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Custom Title<span class="cp-label-sub">Under your name</span></div>
              <input class="cp-input" value="// ships tweaks daily · the hook whisperer · IPA encoder since 2023" id="ucp-title"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Bio<span class="cp-label-sub">About you</span></div>
              <textarea class="cp-textarea" id="ucp-bio">iOS developer and IPA encoder. If it&#39;s signed and tweaked on MSIGN, there&#39;s a good chance I built it.</textarea>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Device<span class="cp-label-sub">Your iOS device</span></div>
              <input class="cp-input" value="iPhone 15 Pro · iOS 17.4" id="ucp-device"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Location<span class="cp-label-sub">Optional</span></div>
              <input class="cp-input" value="California, US" id="ucp-location"/>
            </div>
            <div class="cp-btn-row">
              <button class="cp-btn primary" onclick="ucpSaveProfile()"><i class="fas fa-save"></i> Save Changes</button>
              <button class="cp-btn secondary" onclick="ucpPane('ucp-profile')"><i class="fas fa-undo"></i> Reset</button>
            </div>
          </div>
        </div>

        <div class="cp-card">
          <div class="cp-card-head cyan"><i class="fas fa-link"></i> Social Links</div>
          <div class="cp-card-body">
            <div class="cp-form-row">
              <div class="cp-label"><i class="fab fa-discord" style="color:#5865F2;"></i> Discord</div>
              <input class="cp-input" value="iOS_Dev#0001" id="ucp-discord"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label"><i class="fab fa-telegram" style="color:var(--cyan);"></i> Telegram</div>
              <input class="cp-input" value="@ios_dev_xyz" id="ucp-telegram"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label"><i class="fab fa-github"></i> GitHub</div>
              <input class="cp-input" value="github.com/iosdev" id="ucp-github"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label"><i class="fas fa-globe" style="color:var(--orange);"></i> Website</div>
              <input class="cp-input" value="ios-dev.xyz" id="ucp-website"/>
            </div>
            <div class="cp-btn-row">
              <button class="cp-btn primary" onclick="ucpSaveSocials()"><i class="fas fa-save"></i> Save Links</button>
            </div>
          </div>
        </div>
      </div>

      <!-- ── AVATAR & BANNER ── -->
      <div class="cp-pane" id="ucp-avatar">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-camera"></i> Profile Picture</div>
          <div class="cp-card-body">
            <div class="cp-avatar-row">
              <div class="cp-avatar-preview" id="ucp-av-preview">iD</div>
              <div class="cp-avatar-controls">
                <label class="cp-upload-btn">
                  <i class="fas fa-upload"></i> Upload Image
                  <input type="file" accept="image/*" style="display:none;" onchange="ucpAvatarFile(this)">
                </label>
                <input class="cp-input" placeholder="Or paste image URL..." id="ucp-av-url" oninput="ucpAvatarUrlPreview(this.value)"/>
                <div style="display:flex;gap:6px;">
                  <button class="cp-btn primary" onclick="ucpApplyAvatar()"><i class="fas fa-check"></i> Apply</button>
                  <button class="cp-btn danger" onclick="ucpResetAvatar()"><i class="fas fa-trash"></i> Remove</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-image"></i> Profile Banner</div>
          <div class="cp-card-body">
            <div class="cp-banner-preview" id="ucp-banner-preview"></div>
            <div style="font-family:'Oswald',sans-serif;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);margin-bottom:8px;">Quick Presets</div>
            <div class="cp-banner-presets" id="ucp-banner-presets"></div>
            <div style="margin-bottom:8px;">
              <label class="cp-upload-btn" style="margin-bottom:8px;">
                <i class="fas fa-image"></i> Upload Custom Banner Image
                <input type="file" accept="image/*" style="display:none;" onchange="ucpBannerFile(this)">
              </label>
            </div>
            <input class="cp-input" placeholder="Or paste banner image URL..." id="ucp-banner-url" style="margin-bottom:8px;"/>
            <div class="cp-btn-row">
              <button class="cp-btn primary" onclick="ucpApplyBanner()"><i class="fas fa-check"></i> Apply</button>
              <button class="cp-btn danger" onclick="ucpResetBanner()"><i class="fas fa-undo"></i> Reset Default</button>
            </div>
          </div>
        </div>
      </div>

      <!-- ── SIGNATURE ── -->
      <div class="cp-pane" id="ucp-sig">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-signature"></i> Forum Signature</div>
          <div class="cp-card-body">
            <div class="cp-form-row">
              <div class="cp-label">Signature<span class="cp-label-sub">Max 500 chars</span></div>
              <textarea class="cp-textarea" id="ucp-sig-text" style="min-height:100px;">"If it's tweaked, I built it." — All IPAs personally tested before release on real hardware.

// MSIGN.PARTY · iOS Encoder · TrustCore Certified</textarea>
            </div>
            <div style="padding:10px 0 0;">
              <div style="font-family:'Oswald',sans-serif;font-size:9px;color:var(--dim);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;">Preview</div>
              <div id="ucp-sig-preview" style="background:#060a0d;border:1px solid var(--border2);padding:12px;border-radius:3px;font-size:12px;color:var(--grey);font-style:italic;white-space:pre-wrap;">"If it's tweaked, I built it."</div>
            </div>
            <div class="cp-btn-row">
              <button class="cp-btn primary" onclick="ucpSaveSig()"><i class="fas fa-save"></i> Save Signature</button>
            </div>
          </div>
        </div>
      </div>

      <!-- ── ACCOUNT SETTINGS ── -->
      <div class="cp-pane" id="ucp-account">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-envelope"></i> Email &amp; Login</div>
          <div class="cp-card-body">
            <div class="cp-form-row">
              <div class="cp-label">Email Address</div>
              <input class="cp-input" value="ios_dev@proton.me" type="email" id="ucp-email"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Username<span class="cp-label-sub">Login name</span></div>
              <input class="cp-input" value="iOS_Dev" id="ucp-username"/>
            </div>
            <div class="cp-btn-row">
              <button class="cp-btn primary" onclick="ucpSaveAccount()"><i class="fas fa-save"></i> Save</button>
            </div>
          </div>
        </div>
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-key"></i> Change Password</div>
          <div class="cp-card-body">
            <div class="cp-form-row">
              <div class="cp-label">Current Password</div>
              <input class="cp-input" type="password" placeholder="••••••••" id="ucp-pw-old"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">New Password</div>
              <input class="cp-input" type="password" placeholder="••••••••" id="ucp-pw-new"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Confirm New</div>
              <input class="cp-input" type="password" placeholder="••••••••" id="ucp-pw-confirm"/>
            </div>
            <div class="cp-btn-row">
              <button class="cp-btn primary" onclick="ucpChangePassword()"><i class="fas fa-lock"></i> Update Password</button>
            </div>
          </div>
        </div>
      </div>

      <!-- ── PRIVACY ── -->
      <div class="cp-pane" id="ucp-privacy">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-lock"></i> Privacy Settings</div>
          <div class="cp-card-body">
            <div class="cp-toggle-row">
              <div><div class="cp-toggle-label">Show online status</div><div class="cp-toggle-sub">Others can see when you're active</div></div>
              <label class="cp-toggle"><input type="checkbox" checked><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-toggle-row">
              <div><div class="cp-toggle-label">Allow friend requests</div><div class="cp-toggle-sub">Other users can add you as a friend</div></div>
              <label class="cp-toggle"><input type="checkbox" checked><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-toggle-row">
              <div><div class="cp-toggle-label">Allow private messages</div><div class="cp-toggle-sub">Receive PMs from other users</div></div>
              <label class="cp-toggle"><input type="checkbox" checked><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-toggle-row">
              <div><div class="cp-toggle-label">Show in member list</div><div class="cp-toggle-sub">Appear in the public member directory</div></div>
              <label class="cp-toggle"><input type="checkbox" checked><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-toggle-row">
              <div><div class="cp-toggle-label">Hide post count</div><div class="cp-toggle-sub">Don't display your post count publicly</div></div>
              <label class="cp-toggle"><input type="checkbox"><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-btn-row">
              <button class="cp-btn primary" onclick="ucpSavePrivacy()"><i class="fas fa-save"></i> Save Privacy Settings</button>
            </div>
          </div>
        </div>
      </div>

      <!-- ── NOTIFICATIONS ── -->
      <div class="cp-pane" id="ucp-notifs">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-bell"></i> Notification Preferences</div>
          <div class="cp-card-body">
            <div class="cp-toggle-row">
              <div><div class="cp-toggle-label">Thread replies</div><div class="cp-toggle-sub">Notify when someone replies to your posts</div></div>
              <label class="cp-toggle"><input type="checkbox" checked><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-toggle-row">
              <div><div class="cp-toggle-label">Rep received</div><div class="cp-toggle-sub">Notify when you receive reputation</div></div>
              <label class="cp-toggle"><input type="checkbox" checked><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-toggle-row">
              <div><div class="cp-toggle-label">Vouches</div><div class="cp-toggle-sub">Notify when someone vouches for you</div></div>
              <label class="cp-toggle"><input type="checkbox" checked><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-toggle-row">
              <div><div class="cp-toggle-label">Friend requests</div><div class="cp-toggle-sub">Notify when you receive a friend request</div></div>
              <label class="cp-toggle"><input type="checkbox" checked><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-toggle-row">
              <div><div class="cp-toggle-label">Private messages</div><div class="cp-toggle-sub">Notify for new PMs</div></div>
              <label class="cp-toggle"><input type="checkbox" checked><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-toggle-row">
              <div><div class="cp-toggle-label">Site announcements</div><div class="cp-toggle-sub">Important updates from the admin team</div></div>
              <label class="cp-toggle"><input type="checkbox" checked><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-btn-row">
              <button class="cp-btn primary" onclick="ucpSaveNotifs()"><i class="fas fa-save"></i> Save Preferences</button>
            </div>
          </div>
        </div>
      </div>

      <!-- ── MY POSTS ── -->
      <div class="cp-pane" id="ucp-posts">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-comments"></i> My Recent Posts</div>
          <table class="acp-table">
            <thead><tr><th>Thread</th><th>Section</th><th>Date</th><th>Actions</th></tr></thead>
            <tbody>
              <tr><td>iOS 17.5 signing status update</td><td class="acp-td-meta">IPA Releases</td><td class="acp-td-meta">Feb 18, 2026</td><td><button class="acp-user-btn" onclick="showToast('info','Edit','Post editor would open here.')">Edit</button> <button class="acp-user-btn ban" onclick="showToast('warning','Deleted','Post removed.')">Delete</button></td></tr>
              <tr><td>RecallUnlock v2.1 — Full bypass</td><td class="acp-td-meta">Tweaks &amp; Dylibs</td><td class="acp-td-meta">Feb 17, 2026</td><td><button class="acp-user-btn" onclick="showToast('info','Edit','Post editor would open here.')">Edit</button> <button class="acp-user-btn ban" onclick="showToast('warning','Deleted','Post removed.')">Delete</button></td></tr>
              <tr><td>How to inject dylib without jailbreak</td><td class="acp-td-meta">Help &amp; Support</td><td class="acp-td-meta">Feb 15, 2026</td><td><button class="acp-user-btn" onclick="showToast('info','Edit','Post editor would open here.')">Edit</button> <button class="acp-user-btn ban" onclick="showToast('warning','Deleted','Post removed.')">Delete</button></td></tr>
              <tr><td>Spotify++ 8.9 — What changed?</td><td class="acp-td-meta">IPA Releases</td><td class="acp-td-meta">Feb 12, 2026</td><td><button class="acp-user-btn" onclick="showToast('info','Edit','Post editor would open here.')">Edit</button> <button class="acp-user-btn ban" onclick="showToast('warning','Deleted','Post removed.')">Delete</button></td></tr>
              <tr><td>TrustCore v4 migration guide</td><td class="acp-td-meta">Announcements</td><td class="acp-td-meta">Feb 10, 2026</td><td><button class="acp-user-btn" onclick="showToast('info','Edit','Post editor would open here.')">Edit</button> <button class="acp-user-btn ban" onclick="showToast('warning','Deleted','Post removed.')">Delete</button></td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- ── MY IPAS ── -->
      <div class="cp-pane" id="ucp-ipas">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-box-open"></i> My IPA Releases</div>
          <table class="acp-table">
            <thead><tr><th>App</th><th>Version</th><th>Signs</th><th>Status</th><th>Actions</th></tr></thead>
            <tbody>
              <tr><td>Spotify++</td><td class="acp-td-meta">v8.9.12</td><td class="acp-td-meta">12.8k</td><td><span style="color:var(--green);font-size:10px;font-family:'Oswald',sans-serif;">LIVE</span></td><td><button class="acp-user-btn" onclick="showToast('info','Edit','IPA editor would open.')">Edit</button> <button class="acp-user-btn ban" onclick="showToast('warning','Removed','IPA removed from library.')">Remove</button></td></tr>
              <tr><td>Discord++</td><td class="acp-td-meta">v222.0</td><td class="acp-td-meta">4.8k</td><td><span style="color:var(--green);font-size:10px;font-family:'Oswald',sans-serif;">LIVE</span></td><td><button class="acp-user-btn" onclick="showToast('info','Edit','IPA editor would open.')">Edit</button> <button class="acp-user-btn ban" onclick="showToast('warning','Removed','IPA removed from library.')">Remove</button></td></tr>
              <tr><td>TikTok++</td><td class="acp-td-meta">v33.2</td><td class="acp-td-meta">4.4k</td><td><span style="color:var(--yellow);font-size:10px;font-family:'Oswald',sans-serif;">REVIEW</span></td><td><button class="acp-user-btn" onclick="showToast('info','Edit','IPA editor would open.')">Edit</button> <button class="acp-user-btn ban" onclick="showToast('warning','Removed','IPA removed from library.')">Remove</button></td></tr>
              <tr><td>WhatsApp++</td><td class="acp-td-meta">v24.8</td><td class="acp-td-meta">3.9k</td><td><span style="color:var(--green);font-size:10px;font-family:'Oswald',sans-serif;">LIVE</span></td><td><button class="acp-user-btn" onclick="showToast('info','Edit','IPA editor would open.')">Edit</button> <button class="acp-user-btn ban" onclick="showToast('warning','Removed','IPA removed from library.')">Remove</button></td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- ── FRIENDS ── -->
      <div class="cp-pane" id="ucp-friends">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-users"></i> Friends List</div>
          <div style="padding:0;">
            <div class="acp-user-row">
              <div class="acp-user-av" style="background:rgba(0,212,255,0.15);color:var(--cyan);border:1px solid rgba(0,212,255,0.2);">ZE</div>
              <div><div class="acp-user-name">ZEFv</div><div class="acp-user-meta">Developer · Online Now</div></div>
              <div class="acp-user-actions"><button class="acp-user-btn" onclick="closeUCP();openProfile('ZEFv')">Profile</button><button class="acp-user-btn ban" onclick="showToast('info','Removed','Friend removed.')">Remove</button></div>
            </div>
            <div class="acp-user-row">
              <div class="acp-user-av" style="background:rgba(255,61,205,0.15);color:var(--pink);border:1px solid rgba(255,61,205,0.2);">xX</div>
              <div><div class="acp-user-name">xXDarkXx</div><div class="acp-user-meta">VIP Member · Last seen 2h ago</div></div>
              <div class="acp-user-actions"><button class="acp-user-btn" onclick="closeUCP();openProfile('xXDarkXx')">Profile</button><button class="acp-user-btn ban" onclick="showToast('info','Removed','Friend removed.')">Remove</button></div>
            </div>
          </div>
        </div>
      </div>

    </div><!-- /content -->
  </div><!-- /cp-layout -->
</div><!-- /cp-shell -->
</div><!-- /ucp-overlay -->


<!-- ══════════════════════════════════════════════════════
     ADMIN CONTROL PANEL (ACP)
════════════════════════════════════════════════════════ -->
<div id="acp-overlay" class="cp-overlay">
<div class="cp-shell">

  <div class="cp-header">
    <div class="cp-header-icon red"><i class="fas fa-shield-alt"></i></div>
    <div>
      <div class="cp-header-title" style="color:#ff5555;">Admin Control Panel</div>
      <div class="cp-header-sub">Site administration — use with caution</div>
    </div>
    <button class="cp-close-btn" onclick="closeACP()"><i class="fas fa-times"></i> Close</button>
  </div>

  <!-- Stats overview -->
  <div class="acp-stats-grid">
    <div class="acp-stat-card"><div class="acp-stat-num" style="color:var(--cyan);">24</div><div class="acp-stat-lbl">Total Users</div></div>
    <div class="acp-stat-card"><div class="acp-stat-num" style="color:var(--green);">187</div><div class="acp-stat-lbl">Total Posts</div></div>
    <div class="acp-stat-card"><div class="acp-stat-num" style="color:var(--orange);">14</div><div class="acp-stat-lbl">IPAs Live</div></div>
    <div class="acp-stat-card"><div class="acp-stat-num" style="color:#ff5555;">3</div><div class="acp-stat-lbl">Reports Open</div></div>
    <div class="acp-stat-card"><div class="acp-stat-num" style="color:var(--yellow);">11</div><div class="acp-stat-lbl">Online Now</div></div>
    <div class="acp-stat-card"><div class="acp-stat-num" style="color:var(--pink);">8</div><div class="acp-stat-lbl">VIP Members</div></div>
    <div class="acp-stat-card"><div class="acp-stat-num" style="color:var(--green);">2</div><div class="acp-stat-lbl">Active Bans</div></div>
    <div class="acp-stat-card"><div class="acp-stat-num" style="color:var(--cyan);">2</div><div class="acp-stat-lbl">IPA Pending</div></div>
  </div>

  <div class="cp-layout">

    <!-- Sidebar -->
    <div class="cp-nav" id="acp-nav">
      <div class="cp-nav-section">Users</div>
      <div class="cp-nav-item active" onclick="acpPane('acp-users')"><i class="fas fa-users"></i> User Management</div>
      <div class="cp-nav-item" onclick="acpPane('acp-bans')"><i class="fas fa-ban"></i> Bans &amp; Warns <span class="cp-link-badge">2</span></div>
      <div class="cp-nav-item" onclick="acpPane('acp-roles')"><i class="fas fa-crown"></i> Roles &amp; Ranks</div>

      <div class="cp-nav-section">Content</div>
      <div class="cp-nav-item" onclick="acpPane('acp-posts')"><i class="fas fa-comments"></i> Post Moderation <span class="cp-link-badge">3</span></div>
      <div class="cp-nav-item" onclick="acpPane('acp-ipas')"><i class="fas fa-box-open"></i> IPA Library</div>
      <div class="cp-nav-item" onclick="acpPane('acp-reports')"><i class="fas fa-flag"></i> Reports <span class="cp-link-badge">3</span></div>

      <div class="cp-nav-section">Site</div>
      <div class="cp-nav-item" onclick="acpPane('acp-settings')"><i class="fas fa-cog"></i> Site Settings</div>
      <div class="cp-nav-item" onclick="acpPane('acp-announce')"><i class="fas fa-bullhorn"></i> Announcements</div>
      <div class="cp-nav-item" onclick="acpPane('acp-invites')"><i class="fas fa-envelope"></i> Invite Codes</div>
      <div class="cp-nav-item" onclick="acpPane('acp-revenue')"><i class="fas fa-dollar-sign"></i> Revenue</div>
      <div class="cp-nav-item" onclick="acpPane('acp-certs')"><i class="fas fa-certificate"></i> Certificates</div>
      <div class="cp-nav-item" onclick="acpPane('acp-logs')"><i class="fas fa-list-alt"></i> Audit Log</div>
    </div>

    <!-- Content -->
    <div>

      <!-- ── USER MANAGEMENT ── -->
      <div class="cp-pane active" id="acp-users">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-search"></i> Search Users</div>
          <div class="cp-card-body" style="display:flex;gap:8px;flex-wrap:wrap;">
            <input class="cp-input" placeholder="Username, email, or UID..." id="acp-user-search" style="flex:1;min-width:180px;"/>
            <select class="cp-select" id="acp-user-filter" style="width:130px;">
              <option value="">All Roles</option>
              <option>Admin</option>
              <option>Developer</option>
              <option>VIP</option>
              <option>Encoder</option>
              <option>Member</option>
            </select>
            <button class="cp-btn primary" onclick="acpSearchUser()"><i class="fas fa-search"></i> Search</button>
          </div>
        </div>
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-users"></i> All Users <span style="color:var(--dim);font-size:11px;font-weight:400;margin-left:8px;">24 total</span></div>
          <div style="padding:0;">

            <div class="acp-user-row">
              <div class="acp-user-av" style="background:rgba(255,51,51,0.15);color:#ff5555;border:1px solid rgba(255,51,51,0.2);">AD</div>
              <div><div class="acp-user-name">admin</div><div class="acp-user-meta">#00001 · Administrator · 94 posts · Joined Jan 5, 2026</div></div>
              <span class="acp-user-role" style="background:rgba(255,51,51,0.15);color:#ff5555;border:1px solid rgba(255,51,51,0.2);">Admin</span>
              <div class="acp-user-actions">
                <button class="acp-user-btn" onclick="acpEditUser('admin')">Edit</button>
                <button class="acp-user-btn" style="opacity:0.3;cursor:not-allowed;">Ban</button>
              </div>
            </div>

            <div class="acp-user-row">
              <div class="acp-user-av" style="background:rgba(0,212,255,0.15);color:var(--cyan);border:1px solid rgba(0,212,255,0.2);">ZE</div>
              <div><div class="acp-user-name">ZEFv</div><div class="acp-user-meta">#00002 · Developer · 312 posts · Joined Jan 8, 2026</div></div>
              <span class="acp-user-role" style="background:rgba(0,212,255,0.15);color:var(--cyan);border:1px solid rgba(0,212,255,0.2);">Dev</span>
              <div class="acp-user-actions">
                <button class="acp-user-btn" onclick="acpEditUser('ZEFv')">Edit</button>
                <button class="acp-user-btn ban" onclick="acpBanUser('ZEFv')">Ban</button>
              </div>
            </div>

            <div class="acp-user-row">
              <div class="acp-user-av" style="background:rgba(255,208,0,0.15);color:var(--yellow);border:1px solid rgba(255,208,0,0.2);">iD</div>
              <div><div class="acp-user-name">iOS_Dev</div><div class="acp-user-meta">#00004 · Encoder · VIP · 218 posts · Joined Jan 14, 2026</div></div>
              <span class="acp-user-role" style="background:rgba(157,92,255,0.15);color:var(--purple);border:1px solid rgba(157,92,255,0.25);">VIP</span>
              <div class="acp-user-actions">
                <button class="acp-user-btn" onclick="acpEditUser('iOS_Dev')">Edit</button>
                <button class="acp-user-btn ban" onclick="acpBanUser('iOS_Dev')">Ban</button>
              </div>
            </div>

            <div class="acp-user-row">
              <div class="acp-user-av" style="background:rgba(255,61,205,0.15);color:var(--pink);border:1px solid rgba(255,61,205,0.2);">xX</div>
              <div><div class="acp-user-name">xXDarkXx</div><div class="acp-user-meta">#00088 · VIP Member · 87 posts · Joined Jan 20, 2026</div></div>
              <span class="acp-user-role" style="background:rgba(157,92,255,0.15);color:var(--purple);border:1px solid rgba(157,92,255,0.25);">VIP</span>
              <div class="acp-user-actions">
                <button class="acp-user-btn" onclick="acpEditUser('xXDarkXx')">Edit</button>
                <button class="acp-user-btn ban" onclick="acpBanUser('xXDarkXx')">Ban</button>
              </div>
            </div>

            <div class="acp-user-row">
              <div class="acp-user-av" style="background:rgba(0,204,85,0.15);color:var(--green);border:1px solid rgba(0,204,85,0.2);">cR</div>
              <div><div class="acp-user-name">cR4ck3r</div><div class="acp-user-meta">#00119 · VIP Member · 63 posts · Joined Jan 22, 2026</div></div>
              <span class="acp-user-role" style="background:rgba(157,92,255,0.15);color:var(--purple);border:1px solid rgba(157,92,255,0.25);">VIP</span>
              <div class="acp-user-actions">
                <button class="acp-user-btn" onclick="acpEditUser('cR4ck3r')">Edit</button>
                <button class="acp-user-btn ban" onclick="acpBanUser('cR4ck3r')">Ban</button>
              </div>
            </div>

            <div class="acp-user-row">
              <div class="acp-user-av" style="background:rgba(255,136,0,0.15);color:var(--orange);border:1px solid rgba(255,136,0,0.2);">Ap</div>
              <div><div class="acp-user-name">AppleJuice</div><div class="acp-user-meta">#00203 · Encoder · 141 posts · Joined Jan 29, 2026</div></div>
              <span class="acp-user-role" style="background:rgba(255,208,0,0.12);color:var(--yellow);border:1px solid rgba(255,208,0,0.2);">Encoder</span>
              <div class="acp-user-actions">
                <button class="acp-user-btn" onclick="acpEditUser('AppleJuice')">Edit</button>
                <button class="acp-user-btn ban" onclick="acpBanUser('AppleJuice')">Ban</button>
              </div>
            </div>

            <div class="acp-user-row">
              <div class="acp-user-av" style="background:rgba(136,153,170,0.15);color:var(--grey);border:1px solid rgba(136,153,170,0.2);">n3</div>
              <div><div class="acp-user-name">n3wbie_42</div><div class="acp-user-meta">#01204 · Member · 12 posts · Joined Feb 17, 2026</div></div>
              <span class="acp-user-role" style="background:rgba(255,255,255,0.06);color:var(--grey);border:1px solid var(--border);">Member</span>
              <div class="acp-user-actions">
                <button class="acp-user-btn" onclick="acpEditUser('n3wbie_42')">Edit</button>
                <button class="acp-user-btn ban" onclick="acpBanUser('n3wbie_42')">Ban</button>
              </div>
            </div>

            <div class="acp-user-row">
              <div class="acp-user-av" style="background:rgba(136,153,170,0.15);color:var(--grey);border:1px solid rgba(136,153,170,0.2);">jB</div>
              <div><div class="acp-user-name">jBreakFan</div><div class="acp-user-meta">#01189 · Member · 28 posts · Joined Feb 15, 2026</div></div>
              <span class="acp-user-role" style="background:rgba(255,255,255,0.06);color:var(--grey);border:1px solid var(--border);">Member</span>
              <div class="acp-user-actions">
                <button class="acp-user-btn" onclick="acpEditUser('jBreakFan')">Edit</button>
                <button class="acp-user-btn ban" onclick="acpBanUser('jBreakFan')">Ban</button>
              </div>
            </div>

            <div class="acp-user-row">
              <div class="acp-user-av" style="background:rgba(136,153,170,0.15);color:var(--grey);border:1px solid rgba(136,153,170,0.2);">Si</div>
              <div><div class="acp-user-name">SignMonkey</div><div class="acp-user-meta">#01211 · Member · 7 posts · Joined Feb 18, 2026</div></div>
              <span class="acp-user-role" style="background:rgba(255,255,255,0.06);color:var(--grey);border:1px solid var(--border);">Member</span>
              <div class="acp-user-actions">
                <button class="acp-user-btn" onclick="acpEditUser('SignMonkey')">Edit</button>
                <button class="acp-user-btn ban" onclick="acpBanUser('SignMonkey')">Ban</button>
              </div>
            </div>

            <div class="acp-user-row" style="opacity:0.5;">
              <div class="acp-user-av" style="background:rgba(255,51,51,0.1);color:#ff5555;border:1px solid rgba(255,51,51,0.15);">SK</div>
              <div><div class="acp-user-name" style="text-decoration:line-through;color:var(--dim);">SkidKing99</div><div class="acp-user-meta">#00741 · Member · 19 posts · BANNED · Permanent</div></div>
              <span class="acp-user-role" style="background:rgba(255,51,51,0.1);color:#ff5555;border:1px solid rgba(255,51,51,0.2);">Banned</span>
              <div class="acp-user-actions">
                <button class="acp-user-btn" onclick="showToast('info','Lifted','Ban has been lifted.')">Unban</button>
              </div>
            </div>

          </div>
        </div>

        <!-- Quick user edit modal inline -->
        <div class="cp-card" id="acp-user-edit-card" style="display:none;">
          <div class="cp-card-head"><i class="fas fa-user-edit"></i> Edit User: <span id="acp-edit-username" style="color:var(--cyan);"></span></div>
          <div class="cp-card-body">
            <div class="cp-form-row">
              <div class="cp-label">Username</div>
              <input class="cp-input" id="acp-edit-uname" />
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Email</div>
              <input class="cp-input" id="acp-edit-email" placeholder="user@example.com"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Role</div>
              <select class="cp-select" id="acp-edit-role">
                <option>Member</option>
                <option>VIP</option>
                <option>Encoder</option>
                <option>Developer</option>
                <option>Administrator</option>
              </select>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Force Password Reset</div>
              <label class="cp-toggle"><input type="checkbox" id="acp-edit-pwreset"><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Admin Note</div>
              <textarea class="cp-textarea" id="acp-edit-note" style="min-height:60px;" placeholder="Internal note (not shown to user)..."></textarea>
            </div>
            <div class="cp-btn-row">
              <button class="cp-btn primary" onclick="acpSaveUser()"><i class="fas fa-save"></i> Save Changes</button>
              <button class="cp-btn secondary" onclick="document.getElementById('acp-user-edit-card').style.display='none'"><i class="fas fa-times"></i> Cancel</button>
            </div>
          </div>
        </div>
      </div>

      <!-- ── BANS & WARNINGS ── -->
      <div class="cp-pane" id="acp-bans">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-ban"></i> Active Bans</div>
          <table class="acp-table">
            <thead><tr><th>User</th><th>Reason</th><th>Banned By</th><th>Expires</th><th>Actions</th></tr></thead>
            <tbody>
              <tr><td>SkidKing99</td><td class="acp-td-meta">Malware distribution</td><td class="acp-td-meta">admin</td><td class="acp-td-meta">Permanent</td><td><button class="acp-user-btn" onclick="showToast('info','Lifted','Ban has been lifted.')">Lift</button></td></tr>
              <tr><td>spammer001</td><td class="acp-td-meta">Spam / self-promotion</td><td class="acp-td-meta">admin</td><td class="acp-td-meta">Mar 1, 2026</td><td><button class="acp-user-btn" onclick="showToast('info','Lifted','Ban has been lifted.')">Lift</button></td></tr>
            </tbody>
          </table>
        </div>
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-exclamation-triangle"></i> Warnings Issued</div>
          <table class="acp-table">
            <thead><tr><th>User</th><th>Reason</th><th>Warned By</th><th>Date</th><th>Level</th></tr></thead>
            <tbody>
              <tr><td>n3wbie_42</td><td class="acp-td-meta">Posting in wrong section</td><td class="acp-td-meta">admin</td><td class="acp-td-meta">Feb 17, 2026</td><td><span style="color:var(--yellow);font-size:10px;font-family:'Oswald',sans-serif;">1ST</span></td></tr>
              <tr><td>jBreakFan</td><td class="acp-td-meta">Demanding ETA from devs</td><td class="acp-td-meta">admin</td><td class="acp-td-meta">Feb 16, 2026</td><td><span style="color:var(--yellow);font-size:10px;font-family:'Oswald',sans-serif;">1ST</span></td></tr>
              <tr><td>SignMonkey</td><td class="acp-td-meta">Sharing revoked certs publicly</td><td class="acp-td-meta">admin</td><td class="acp-td-meta">Feb 18, 2026</td><td><span style="color:var(--orange);font-size:10px;font-family:'Oswald',sans-serif;">FINAL</span></td></tr>
            </tbody>
          </table>
        </div>
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-exclamation-triangle"></i> Issue Ban / Warning</div>
          <div class="cp-card-body">
            <div class="cp-form-row">
              <div class="cp-label">Username</div>
              <input class="cp-input" placeholder="Target username..." id="acp-ban-user"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Action</div>
              <select class="cp-select" id="acp-ban-type">
                <option>Warning (1st offense)</option>
                <option>Warning (final)</option>
                <option>Temporary ban (7 days)</option>
                <option>Temporary ban (30 days)</option>
                <option>Permanent ban</option>
              </select>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Reason</div>
              <textarea class="cp-textarea" id="acp-ban-reason" style="min-height:60px;" placeholder="Reason for action..."></textarea>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Notify user via PM</div>
              <label class="cp-toggle"><input type="checkbox" checked><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-btn-row">
              <button class="cp-btn danger" onclick="acpIssueBan()"><i class="fas fa-ban"></i> Issue Action</button>
            </div>
          </div>
        </div>
      </div>

      <!-- ── ROLES & RANKS ── -->
      <div class="cp-pane" id="acp-roles">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-crown"></i> Role Management</div>
          <div style="padding:0;">
            <div class="acp-user-row">
              <div class="acp-user-av" style="background:rgba(255,51,51,0.15);color:#ff5555;border:1px solid rgba(255,51,51,0.2);font-size:10px;">ADM</div>
              <div><div class="acp-user-name" style="color:#ff5555;">Administrator</div><div class="acp-user-meta">Full site access · 1 member</div></div>
              <div class="acp-user-actions"><button class="acp-user-btn" onclick="showToast('info','Edit Role','Role editor opens.')">Edit</button></div>
            </div>
            <div class="acp-user-row">
              <div class="acp-user-av" style="background:rgba(0,212,255,0.15);color:var(--cyan);border:1px solid rgba(0,212,255,0.2);font-size:10px;">DEV</div>
              <div><div class="acp-user-name" style="color:var(--cyan);">Developer</div><div class="acp-user-meta">IPA uploads · dylib posts · 2 members</div></div>
              <div class="acp-user-actions"><button class="acp-user-btn" onclick="showToast('info','Edit Role','Role editor opens.')">Edit</button></div>
            </div>
            <div class="acp-user-row">
              <div class="acp-user-av" style="background:rgba(157,92,255,0.15);color:var(--purple);border:1px solid rgba(157,92,255,0.2);font-size:10px;">VIP</div>
              <div><div class="acp-user-name" style="color:var(--purple);">VIP Member</div><div class="acp-user-meta">Unlimited signs · priority support · 8 members</div></div>
              <div class="acp-user-actions"><button class="acp-user-btn" onclick="showToast('info','Edit Role','Role editor opens.')">Edit</button></div>
            </div>
            <div class="acp-user-row">
              <div class="acp-user-av" style="background:rgba(255,208,0,0.15);color:var(--yellow);border:1px solid rgba(255,208,0,0.2);font-size:10px;">ENC</div>
              <div><div class="acp-user-name" style="color:var(--yellow);">Encoder</div><div class="acp-user-meta">IPA submission · verified encoder badge · 3 members</div></div>
              <div class="acp-user-actions"><button class="acp-user-btn" onclick="showToast('info','Edit Role','Role editor opens.')">Edit</button></div>
            </div>
            <div class="acp-user-row">
              <div class="acp-user-av" style="background:rgba(136,153,170,0.12);color:var(--grey);border:1px solid var(--border);font-size:10px;">MEM</div>
              <div><div class="acp-user-name">Member</div><div class="acp-user-meta">Default role · 10 members</div></div>
              <div class="acp-user-actions"><button class="acp-user-btn" onclick="showToast('info','Edit Role','Role editor opens.')">Edit</button></div>
            </div>
          </div>
        </div>
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-user-tag"></i> Assign Role</div>
          <div class="cp-card-body">
            <div class="cp-form-row">
              <div class="cp-label">Username</div>
              <input class="cp-input" placeholder="Username to promote/demote..." id="acp-role-user"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">New Role</div>
              <select class="cp-select" id="acp-role-assign">
                <option>Member</option>
                <option>VIP</option>
                <option>Encoder</option>
                <option>Developer</option>
                <option>Administrator</option>
              </select>
            </div>
            <div class="cp-btn-row">
              <button class="cp-btn primary" onclick="showToast('success','Role Updated','User role has been changed.')"><i class="fas fa-user-tag"></i> Assign Role</button>
            </div>
          </div>
        </div>
      </div>

      <!-- ── POST MODERATION ── -->
      <div class="cp-pane" id="acp-posts">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-comments"></i> Flagged / Reported Posts</div>
          <table class="acp-table">
            <thead><tr><th>Post</th><th>Author</th><th>Reported By</th><th>Reason</th><th>Actions</th></tr></thead>
            <tbody>
              <tr><td>iOS 18 jailbreak — leaked method...</td><td class="acp-td-meta">SkidKing99</td><td class="acp-td-meta">ZEFv</td><td class="acp-td-meta">Misinformation</td><td><button class="acp-user-btn" onclick="showToast('success','Removed','Post deleted.')">Delete</button> <button class="acp-user-btn" onclick="showToast('info','Approved','Post approved.')">Approve</button></td></tr>
              <tr><td>Free VIP accounts — DM me</td><td class="acp-td-meta">spammer001</td><td class="acp-td-meta">iOS_Dev</td><td class="acp-td-meta">Spam</td><td><button class="acp-user-btn" onclick="showToast('success','Removed','Post deleted.')">Delete</button> <button class="acp-user-btn" onclick="showToast('info','Approved','Post approved.')">Approve</button></td></tr>
              <tr><td>My custom dylib crashes on 17.4</td><td class="acp-td-meta">n3wbie_42</td><td class="acp-td-meta">xXDarkXx</td><td class="acp-td-meta">Wrong section</td><td><button class="acp-user-btn" onclick="showToast('success','Moved','Post moved.')">Move</button> <button class="acp-user-btn" onclick="showToast('info','Approved','Post approved.')">Approve</button></td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- ── IPA LIBRARY ── -->
      <div class="cp-pane" id="acp-ipas">

        <!-- ── Direct Admin Upload ── -->
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-upload"></i> Upload IPA (Admin — auto-approved)</div>
          <div class="cp-card-body">
            <div class="cp-form-row">
              <div class="cp-label">IPA File <span style="color:var(--red)">*</span></div>
              <input type="file" accept=".ipa" id="acp-ipa-file" class="cp-input" style="padding:6px;" onchange="acpIPAFileSelected(this)"/>
            </div>
            <div id="acp-ipa-parsed" style="display:none;background:var(--card2);border:1px solid var(--border);border-radius:4px;padding:10px 14px;margin:6px 0;font-size:12px;color:var(--grey);">
              <span id="acp-ipa-parsed-name" style="color:#fff;font-weight:700;"></span>
              <span id="acp-ipa-parsed-bundle" style="margin-left:10px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--cyan);"></span>
              <span id="acp-ipa-parsed-size" style="margin-left:10px;"></span>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">App Name <span style="color:var(--red)">*</span></div>
              <input class="cp-input" id="acp-upload-name" placeholder="e.g. Spotify++"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Bundle ID <span style="color:var(--red)">*</span></div>
              <input class="cp-input" id="acp-upload-bundle" placeholder="com.spotify.client" style="font-family:'JetBrains Mono',monospace;font-size:12px;"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Version <span style="color:var(--red)">*</span></div>
              <input class="cp-input" id="acp-upload-version" placeholder="v8.9.12"/>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
              <div class="cp-form-row" style="margin:0;">
                <div class="cp-label">Min iOS</div>
                <input class="cp-input" id="acp-upload-minios" placeholder="14.0"/>
              </div>
              <div class="cp-form-row" style="margin:0;">
                <div class="cp-label">Max iOS</div>
                <input class="cp-input" id="acp-upload-maxios" placeholder="17.x"/>
              </div>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Category</div>
              <select class="cp-input" id="acp-upload-cat">
                <option value="media">Media</option>
                <option value="social">Social</option>
                <option value="games">Games</option>
                <option value="tools">Tools</option>
                <option value="jailbreak">Jailbreak</option>
                <option value="other">Other</option>
              </select>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Description</div>
              <textarea class="cp-input" id="acp-upload-desc" rows="3" placeholder="What does this app do / what's modified?"></textarea>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Changelog</div>
              <textarea class="cp-input" id="acp-upload-changelog" rows="2" placeholder="What changed in this version?"></textarea>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Icon URL</div>
              <input class="cp-input" id="acp-upload-icon" placeholder="https://..."/>
            </div>
            <div class="cp-form-row" style="align-items:center;">
              <div class="cp-label">Staff Pick</div>
              <input type="checkbox" id="acp-upload-featured" style="width:16px;height:16px;accent-color:var(--yellow);"/>
              <span style="font-size:11px;color:var(--dim);margin-left:8px;">Mark as featured / staff pick</span>
            </div>
            <div id="acp-upload-progress" style="display:none;margin:8px 0;">
              <div style="height:3px;background:var(--border);border-radius:2px;overflow:hidden;">
                <div id="acp-upload-bar" style="height:100%;background:var(--cyan);width:0%;transition:width 0.3s;"></div>
              </div>
              <div id="acp-upload-status" style="font-size:11px;color:var(--dim);margin-top:4px;">Uploading...</div>
            </div>
            <div class="cp-btn-row">
              <button class="cp-btn primary" onclick="acpUploadIPA(this)"><i class="fas fa-upload"></i> Upload &amp; Publish</button>
            </div>
          </div>
        </div>

        <!-- ── Community Review Queue ── -->
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-box-open"></i> Community Review Queue <span style="color:var(--yellow);font-size:11px;margin-left:8px;" id="acp-queue-count">loading...</span></div>
          <table class="acp-table">
            <thead><tr><th>App</th><th>Submitter</th><th>Version</th><th>Size</th><th>Status</th><th>Actions</th></tr></thead>
            <tbody id="acp-queue-tbody">
              <tr><td colspan="6" style="color:var(--dim);text-align:center;padding:16px;"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>
            </tbody>
          </table>
        </div>

        <!-- ── Live IPAs ── -->
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-check-circle"></i> Live Self-Hosted IPAs <span style="color:var(--dim);font-size:11px;font-weight:400;margin-left:8px;" id="acp-live-count"></span></div>
          <table class="acp-table">
            <thead><tr><th>App</th><th>Bundle</th><th>Version</th><th>Signs</th><th>Featured</th><th>Actions</th></tr></thead>
            <tbody id="acp-live-tbody">
              <tr><td colspan="6" style="color:var(--dim);text-align:center;padding:16px;"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- ── REPORTS ── -->
      <div class="cp-pane" id="acp-reports">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-flag"></i> Open Reports</div>
          <table class="acp-table">
            <thead><tr><th>Item</th><th>Type</th><th>Reporter</th><th>Date</th><th>Actions</th></tr></thead>
            <tbody>
              <tr><td>Post by SkidKing99</td><td class="acp-td-meta">Post</td><td class="acp-td-meta">ZEFv</td><td class="acp-td-meta">Feb 18</td><td><button class="acp-user-btn" onclick="showToast('info','Reviewed','Report marked reviewed.')">Review</button> <button class="acp-user-btn ban" onclick="showToast('success','Actioned','Content removed.')">Action</button></td></tr>
              <tr><td>User spammer001</td><td class="acp-td-meta">User</td><td class="acp-td-meta">iOS_Dev</td><td class="acp-td-meta">Feb 17</td><td><button class="acp-user-btn" onclick="showToast('info','Reviewed','Report marked reviewed.')">Review</button> <button class="acp-user-btn ban" onclick="acpBanUser('spammer001')">Ban</button></td></tr>
              <tr><td>IPA: CredentialHarvest.ipa</td><td class="acp-td-meta">IPA</td><td class="acp-td-meta">xXDarkXx</td><td class="acp-td-meta">Feb 17</td><td><button class="acp-user-btn" onclick="showToast('info','Reviewed','Report marked reviewed.')">Review</button> <button class="acp-user-btn ban" onclick="showToast('success','Removed','IPA removed.')">Remove</button></td></tr>
            </tbody>
          </table>
        </div>
        <div class="cp-card">
          <div class="cp-card-head" style="color:var(--dim)"><i class="fas fa-check-circle"></i> Resolved Reports <span style="font-weight:400;font-size:11px;margin-left:6px;">last 7 days</span></div>
          <table class="acp-table">
            <thead><tr><th>Item</th><th>Type</th><th>Resolved By</th><th>Action Taken</th><th>Date</th></tr></thead>
            <tbody>
              <tr style="opacity:0.6;"><td>Post by jBreakFan</td><td class="acp-td-meta">Post</td><td class="acp-td-meta">admin</td><td class="acp-td-meta">Warning issued</td><td class="acp-td-meta">Feb 16</td></tr>
              <tr style="opacity:0.6;"><td>SignMonkey's cert share</td><td class="acp-td-meta">Post</td><td class="acp-td-meta">admin</td><td class="acp-td-meta">Post deleted</td><td class="acp-td-meta">Feb 15</td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- ── SITE SETTINGS ── -->
      <div class="cp-pane" id="acp-settings">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-cog"></i> General Settings</div>
          <div class="cp-card-body">
            <div class="cp-form-row">
              <div class="cp-label">Site Name</div>
              <input class="cp-input" value="MSIGN.PARTY" id="acp-sitename"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Site Tagline</div>
              <input class="cp-input" value="The Premier iOS Signing Portal" id="acp-tagline"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Sign Limit (Free)</div>
              <input class="cp-input" value="25" type="number" id="acp-sign-limit"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Sign Limit (VIP)</div>
              <input class="cp-input" value="Unlimited" id="acp-sign-limit-vip"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Max IPA File Size (MB)</div>
              <input class="cp-input" value="512" type="number" id="acp-ipa-maxsize"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">VIP Price (USD/mo)</div>
              <input class="cp-input" value="9.99" type="number" id="acp-vip-price"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Contact Email</div>
              <input class="cp-input" value="<?php echo htmlspecialchars($loggedIn ? ($user['email'] ?? '') : ''); ?>" id="acp-contact-email"/>
            </div>
            <div class="cp-btn-row">
              <button class="cp-btn primary" onclick="acpSaveSettings()"><i class="fas fa-save"></i> Save Settings</button>
            </div>
          </div>
        </div>
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-toggle-on"></i> Feature Flags</div>
          <div class="cp-card-body">
            <div class="cp-toggle-row">
              <div><div class="cp-toggle-label">Registration open</div><div class="cp-toggle-sub">Allow new users to register</div></div>
              <label class="cp-toggle"><input type="checkbox" checked><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-toggle-row">
              <div><div class="cp-toggle-label">Invite-only mode</div><div class="cp-toggle-sub">New accounts require an invite code</div></div>
              <label class="cp-toggle"><input type="checkbox" checked><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-toggle-row">
              <div><div class="cp-toggle-label">Forum public</div><div class="cp-toggle-sub">Non-logged-in users can read threads</div></div>
              <label class="cp-toggle"><input type="checkbox" checked><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-toggle-row">
              <div><div class="cp-toggle-label">IPA submissions open</div><div class="cp-toggle-sub">Allow encoders to submit new IPAs</div></div>
              <label class="cp-toggle"><input type="checkbox" checked><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-toggle-row">
              <div><div class="cp-toggle-label">VIP purchases enabled</div><div class="cp-toggle-sub">Allow users to upgrade via payment</div></div>
              <label class="cp-toggle"><input type="checkbox" checked><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-toggle-row">
              <div><div class="cp-toggle-label">Maintenance mode</div><div class="cp-toggle-sub">Show maintenance page to all users</div></div>
              <label class="cp-toggle"><input type="checkbox"><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-btn-row">
              <button class="cp-btn primary" onclick="acpSaveFlags()"><i class="fas fa-save"></i> Save Flags</button>
            </div>
          </div>
        </div>
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-shield-alt"></i> Security</div>
          <div class="cp-card-body">
            <div class="cp-form-row">
              <div class="cp-label">Rate Limit (signs/hour/IP)</div>
              <input class="cp-input" value="10" type="number"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Failed Login Lockout (attempts)</div>
              <input class="cp-input" value="5" type="number"/>
            </div>
            <div class="cp-toggle-row">
              <div><div class="cp-toggle-label">Require email verification</div><div class="cp-toggle-sub">New accounts must verify email</div></div>
              <label class="cp-toggle"><input type="checkbox" checked><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-toggle-row">
              <div><div class="cp-toggle-label">2FA for admins</div><div class="cp-toggle-sub">Enforce 2FA on all admin accounts</div></div>
              <label class="cp-toggle"><input type="checkbox" checked><div class="cp-toggle-track"></div></label>
            </div>
            <div class="cp-btn-row">
              <button class="cp-btn primary" onclick="showToast('success','Saved','Security settings saved.')"><i class="fas fa-save"></i> Save Security Settings</button>
            </div>
          </div>
        </div>
      </div>

      <!-- ── ANNOUNCEMENTS ── -->
      <div class="cp-pane" id="acp-announce">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-bullhorn"></i> Post Announcement</div>
          <div class="cp-card-body">
            <div class="cp-form-row">
              <div class="cp-label">Title</div>
              <input class="cp-input" placeholder="Announcement title..." id="acp-ann-title"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Content</div>
              <textarea class="cp-textarea" id="acp-ann-body" style="min-height:120px;" placeholder="Write your announcement..."></textarea>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Audience</div>
              <select class="cp-select">
                <option>All users</option>
                <option>VIP only</option>
                <option>Encoders only</option>
                <option>Staff only</option>
              </select>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Type</div>
              <select class="cp-select" id="acp-ann-type">
                <option>Info</option>
                <option>Warning</option>
                <option>Critical</option>
              </select>
            </div>
            <div class="cp-btn-row">
              <button class="cp-btn primary" onclick="acpPostAnnouncement()"><i class="fas fa-bullhorn"></i> Publish</button>
              <button class="cp-btn secondary" onclick="showToast('info','Preview','Preview mode coming soon.')"><i class="fas fa-eye"></i> Preview</button>
            </div>
          </div>
        </div>
      </div>

      <!-- ── AUDIT LOG ── -->
      <div class="cp-pane" id="acp-logs">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-list-alt"></i> Recent Admin Actions <span style="color:var(--dim);font-size:11px;font-weight:400;margin-left:8px;">last 30 entries</span></div>
          <table class="acp-table">
            <thead><tr><th>Action</th><th>Admin</th><th>Target</th><th>IP</th><th>Time</th></tr></thead>
            <tbody>
              <tr><td>Banned user</td><td class="acp-td-meta">admin</td><td class="acp-td-meta">SkidKing99</td><td class="acp-td-meta">192.168.1.1</td><td class="acp-td-meta">Feb 18 · 11:42 PM</td></tr>
              <tr><td>Approved IPA</td><td class="acp-td-meta">admin</td><td class="acp-td-meta">Spotify++ v8.9</td><td class="acp-td-meta">192.168.1.1</td><td class="acp-td-meta">Feb 18 · 09:14 PM</td></tr>
              <tr><td>Deleted post</td><td class="acp-td-meta">admin</td><td class="acp-td-meta">Post #4821</td><td class="acp-td-meta">192.168.1.1</td><td class="acp-td-meta">Feb 17 · 08:55 PM</td></tr>
              <tr><td>Upgraded user</td><td class="acp-td-meta">admin</td><td class="acp-td-meta">iOS_Dev → VIP</td><td class="acp-td-meta">192.168.1.1</td><td class="acp-td-meta">Feb 17 · 03:10 PM</td></tr>
              <tr><td>Posted announcement</td><td class="acp-td-meta">admin</td><td class="acp-td-meta">TrustCore v4 update</td><td class="acp-td-meta">192.168.1.1</td><td class="acp-td-meta">Feb 16 · 12:00 PM</td></tr>
              <tr><td>Issued warning</td><td class="acp-td-meta">admin</td><td class="acp-td-meta">n3wbie_42</td><td class="acp-td-meta">192.168.1.1</td><td class="acp-td-meta">Feb 17 · 02:44 PM</td></tr>
              <tr><td>Generated invite code</td><td class="acp-td-meta">admin</td><td class="acp-td-meta">INV-K9X2-ALPHA</td><td class="acp-td-meta">192.168.1.1</td><td class="acp-td-meta">Feb 15 · 06:30 PM</td></tr>
              <tr><td>Rejected IPA</td><td class="acp-td-meta">admin</td><td class="acp-td-meta">WeirdApp v1.0</td><td class="acp-td-meta">192.168.1.1</td><td class="acp-td-meta">Feb 14 · 04:18 PM</td></tr>
              <tr><td>Revoked certificate</td><td class="acp-td-meta">admin</td><td class="acp-td-meta">CERT-7X9F-BETA</td><td class="acp-td-meta">192.168.1.1</td><td class="acp-td-meta">Feb 13 · 11:05 AM</td></tr>
              <tr><td>Updated site settings</td><td class="acp-td-meta">admin</td><td class="acp-td-meta">Sign limit: 25 → 30</td><td class="acp-td-meta">192.168.1.1</td><td class="acp-td-meta">Feb 10 · 09:00 AM</td></tr>
            </tbody>
          </table>
        </div>
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-download"></i> Export Log</div>
          <div class="cp-card-body">
            <div class="cp-form-row">
              <div class="cp-label">Date Range</div>
              <select class="cp-select">
                <option>Last 7 days</option>
                <option>Last 30 days</option>
                <option>Last 90 days</option>
                <option>All time</option>
              </select>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Format</div>
              <select class="cp-select">
                <option>CSV</option>
                <option>JSON</option>
              </select>
            </div>
            <div class="cp-btn-row">
              <button class="cp-btn secondary" onclick="showToast('info','Export','Log export queued.')"><i class="fas fa-download"></i> Export</button>
            </div>
          </div>
        </div>
      </div>

      <!-- ── INVITE CODES ── -->
      <div class="cp-pane" id="acp-invites">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-envelope"></i> Generate Invite Code</div>
          <div class="cp-card-body">
            <div class="cp-form-row">
              <div class="cp-label">Uses Allowed</div>
              <select class="cp-select" id="acp-inv-uses">
                <option>1 use</option>
                <option>5 uses</option>
                <option>10 uses</option>
                <option>Unlimited</option>
              </select>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Expires</div>
              <select class="cp-select" id="acp-inv-exp">
                <option>24 hours</option>
                <option>7 days</option>
                <option>30 days</option>
                <option>Never</option>
              </select>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Role on join</div>
              <select class="cp-select" id="acp-inv-role">
                <option>Member</option>
                <option>VIP</option>
                <option>Encoder</option>
              </select>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Note (internal)</div>
              <input class="cp-input" placeholder="Who is this for?" id="acp-inv-note"/>
            </div>
            <div class="cp-btn-row">
              <button class="cp-btn primary" onclick="acpGenInvite()"><i class="fas fa-plus"></i> Generate Code</button>
            </div>
            <div id="acp-inv-result" style="display:none;margin-top:12px;padding:10px 14px;background:#0a0a0a;border:1px solid var(--cyan);font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--cyan);letter-spacing:2px;"></div>
          </div>
        </div>
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-list"></i> Active Invite Codes</div>
          <table class="acp-table">
            <thead><tr><th>Code</th><th>Role</th><th>Uses</th><th>Expires</th><th>Note</th><th>Actions</th></tr></thead>
            <tbody>
              <tr><td style="font-family:'JetBrains Mono',monospace;color:var(--cyan);font-size:11px;">INV-K9X2-ALPHA</td><td class="acp-td-meta">Member</td><td class="acp-td-meta">0 / 5</td><td class="acp-td-meta">Feb 22</td><td class="acp-td-meta">For Discord server</td><td><button class="acp-user-btn ban" onclick="showToast('warning','Revoked','Invite code revoked.')">Revoke</button></td></tr>
              <tr><td style="font-family:'JetBrains Mono',monospace;color:var(--cyan);font-size:11px;">INV-X4R8-BETA</td><td class="acp-td-meta">VIP</td><td class="acp-td-meta">1 / 1</td><td class="acp-td-meta">Feb 26</td><td class="acp-td-meta">Promo giveaway</td><td><button class="acp-user-btn ban" onclick="showToast('warning','Revoked','Invite code revoked.')">Revoke</button></td></tr>
              <tr><td style="font-family:'JetBrains Mono',monospace;color:var(--cyan);font-size:11px;">INV-M2W5-DELTA</td><td class="acp-td-meta">Encoder</td><td class="acp-td-meta">0 / 1</td><td class="acp-td-meta">Never</td><td class="acp-td-meta">New encoder signup</td><td><button class="acp-user-btn ban" onclick="showToast('warning','Revoked','Invite code revoked.')">Revoke</button></td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- ── REVENUE ── -->
      <div class="cp-pane" id="acp-revenue">
        <div class="acp-stats-grid" style="grid-template-columns:repeat(4,1fr);margin-bottom:16px;">
          <div class="acp-stat-card"><div class="acp-stat-num" style="color:var(--green);">$71.92</div><div class="acp-stat-lbl">This Month</div></div>
          <div class="acp-stat-card"><div class="acp-stat-num" style="color:var(--cyan);">$34.97</div><div class="acp-stat-lbl">Last Month</div></div>
          <div class="acp-stat-card"><div class="acp-stat-num" style="color:var(--orange);">8</div><div class="acp-stat-lbl">Active VIPs</div></div>
          <div class="acp-stat-card"><div class="acp-stat-num" style="color:var(--yellow);">$9.99</div><div class="acp-stat-lbl">Plan Price</div></div>
        </div>
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-receipt"></i> Recent Transactions</div>
          <table class="acp-table">
            <thead><tr><th>User</th><th>Plan</th><th>Amount</th><th>Method</th><th>Status</th><th>Date</th></tr></thead>
            <tbody>
              <tr><td>xXDarkXx</td><td class="acp-td-meta">VIP Monthly</td><td style="color:var(--green);">$9.99</td><td class="acp-td-meta">Crypto</td><td><span style="color:var(--green);font-size:10px;font-family:'Oswald',sans-serif;">PAID</span></td><td class="acp-td-meta">Feb 18</td></tr>
              <tr><td>cR4ck3r</td><td class="acp-td-meta">VIP Monthly</td><td style="color:var(--green);">$9.99</td><td class="acp-td-meta">Crypto</td><td><span style="color:var(--green);font-size:10px;font-family:'Oswald',sans-serif;">PAID</span></td><td class="acp-td-meta">Feb 17</td></tr>
              <tr><td>iOS_Dev</td><td class="acp-td-meta">VIP Monthly</td><td style="color:var(--green);">$9.99</td><td class="acp-td-meta">Crypto</td><td><span style="color:var(--green);font-size:10px;font-family:'Oswald',sans-serif;">PAID</span></td><td class="acp-td-meta">Feb 14</td></tr>
              <tr><td>AppleJuice</td><td class="acp-td-meta">VIP Monthly</td><td style="color:var(--green);">$9.99</td><td class="acp-td-meta">Crypto</td><td><span style="color:var(--green);font-size:10px;font-family:'Oswald',sans-serif;">PAID</span></td><td class="acp-td-meta">Feb 12</td></tr>
              <tr><td>jBreakFan</td><td class="acp-td-meta">VIP Monthly</td><td style="color:var(--orange);">$9.99</td><td class="acp-td-meta">Crypto</td><td><span style="color:var(--yellow);font-size:10px;font-family:'Oswald',sans-serif;">PENDING</span></td><td class="acp-td-meta">Feb 19</td></tr>
            </tbody>
          </table>
        </div>
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-gift"></i> Manual VIP Grant</div>
          <div class="cp-card-body">
            <div class="cp-form-row">
              <div class="cp-label">Username</div>
              <input class="cp-input" placeholder="Username to grant VIP..." id="acp-vip-grant-user"/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Duration</div>
              <select class="cp-select">
                <option>30 days</option>
                <option>90 days</option>
                <option>1 year</option>
                <option>Lifetime</option>
              </select>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Reason</div>
              <input class="cp-input" placeholder="e.g. Giveaway winner, promo..." />
            </div>
            <div class="cp-btn-row">
              <button class="cp-btn primary" onclick="showToast('success','VIP Granted','User upgraded to VIP.')"><i class="fas fa-crown"></i> Grant VIP</button>
            </div>
          </div>
        </div>
      </div>

      <!-- ── CERTIFICATES ── -->
      <div class="cp-pane" id="acp-certs">
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-certificate"></i> Active Signing Certificates</div>
          <table class="acp-table">
            <thead><tr><th>Cert ID</th><th>Type</th><th>Signs Used</th><th>Signs Left</th><th>Expires</th><th>Status</th><th>Actions</th></tr></thead>
            <tbody>
              <tr><td style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--cyan);">CERT-7X9F-PRIM</td><td class="acp-td-meta">Enterprise</td><td class="acp-td-meta">312</td><td class="acp-td-meta">688</td><td class="acp-td-meta">Apr 14, 2026</td><td><span style="color:var(--green);font-size:10px;font-family:'Oswald',sans-serif;">ACTIVE</span></td><td><button class="acp-user-btn ban" onclick="showToast('warning','Revoked','Certificate revoked.')">Revoke</button></td></tr>
              <tr><td style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--cyan);">CERT-2A4D-BACK</td><td class="acp-td-meta">Enterprise</td><td class="acp-td-meta">88</td><td class="acp-td-meta">912</td><td class="acp-td-meta">Mar 28, 2026</td><td><span style="color:var(--green);font-size:10px;font-family:'Oswald',sans-serif;">ACTIVE</span></td><td><button class="acp-user-btn ban" onclick="showToast('warning','Revoked','Certificate revoked.')">Revoke</button></td></tr>
              <tr><td style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);">CERT-R1K9-OLD</td><td class="acp-td-meta">Enterprise</td><td class="acp-td-meta">941</td><td class="acp-td-meta">0</td><td class="acp-td-meta">Jan 10, 2026</td><td><span style="color:var(--orange);font-size:10px;font-family:'Oswald',sans-serif;">REVOKED</span></td><td><span style="color:var(--dim);font-size:11px;">—</span></td></tr>
            </tbody>
          </table>
        </div>
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-plus-circle"></i> Add Certificate</div>
          <div class="cp-card-body">
            <div class="cp-form-row">
              <div class="cp-label">Certificate Type</div>
              <select class="cp-select">
                <option>Enterprise (Apple)</option>
                <option>Developer (Personal)</option>
              </select>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">.p12 Password</div>
              <input class="cp-input" type="password" placeholder="Certificate password..."/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Provisioning Profile</div>
              <input class="cp-input" placeholder=".mobileprovision path or UUID..."/>
            </div>
            <div class="cp-form-row">
              <div class="cp-label">Sign Limit (0 = unlimited)</div>
              <input class="cp-input" value="1000" type="number"/>
            </div>
            <div class="cp-btn-row">
              <button class="cp-btn primary" onclick="showToast('success','Added','Certificate added to pool.')"><i class="fas fa-certificate"></i> Add Certificate</button>
            </div>
          </div>
        </div>
        <div class="cp-card">
          <div class="cp-card-head"><i class="fas fa-chart-bar"></i> Certificate Health</div>
          <div class="cp-card-body" style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
            <div>
              <div style="color:var(--dim);font-size:10px;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;">Primary Cert Usage</div>
              <div style="height:8px;background:var(--border);border-radius:4px;overflow:hidden;"><div style="width:31%;height:100%;background:var(--cyan);border-radius:4px;"></div></div>
              <div style="color:var(--grey);font-size:11px;margin-top:4px;">312 / 1000 signs used</div>
            </div>
            <div>
              <div style="color:var(--dim);font-size:10px;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;">Backup Cert Usage</div>
              <div style="height:8px;background:var(--border);border-radius:4px;overflow:hidden;"><div style="width:9%;height:100%;background:var(--green);border-radius:4px;"></div></div>
              <div style="color:var(--grey);font-size:11px;margin-top:4px;">88 / 1000 signs used</div>
            </div>
          </div>
        </div>
      </div>

    </div><!-- /content -->
  </div><!-- /cp-layout -->
</div><!-- /cp-shell -->
</div><!-- /acp-overlay -->
<!-- ══════════════════════════════════════════════════
  VOUCH POPUP OVERLAY
══════════════════════════════════════════════════ -->
<div id="vouch-popup-overlay" class="cp-overlay" onclick="if(event.target===this)closeVouchPopup()" style="z-index:10000;">
  <div class="cp-shell" style="max-width:700px;width:95%;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;">
    <div class="cp-header">
      <div class="cp-header-brand"><i class="fas fa-shield-alt" style="color:var(--green);margin-right:8px;"></i> Vouches — iOS_Dev</div>
      <button class="cp-close-btn" onclick="closeVouchPopup()"><i class="fas fa-times"></i></button>
    </div>
    <div style="overflow-y:auto;flex:1;">
      <!-- Vouch summary bar -->
      <div style="padding:16px 20px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;border-bottom:1px solid var(--border2);background:rgba(0,232,122,0.02);">
        <div style="text-align:center;"><div style="font-family:'Oswald',sans-serif;font-size:22px;font-weight:700;color:var(--green);">47</div><div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-top:2px;">Total Vouches</div></div>
        <div style="text-align:center;"><div style="font-family:'Oswald',sans-serif;font-size:22px;font-weight:700;color:var(--yellow);">4.9<span style="font-size:14px;color:var(--dim);">/5</span></div><div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-top:2px;">Avg Rating</div></div>
        <div style="text-align:center;"><div style="font-family:'Oswald',sans-serif;font-size:22px;font-weight:700;color:var(--cyan);">38</div><div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-top:2px;">5-Star Vouches</div></div>
        <div style="text-align:center;"><div style="font-family:'Oswald',sans-serif;font-size:22px;font-weight:700;color:var(--orange);">#3</div><div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-top:2px;">Platform Rank</div></div>
      </div>
      <!-- Tag cloud -->
      <div style="padding:12px 20px;display:flex;flex-wrap:wrap;gap:7px;border-bottom:1px solid var(--border2);">
        <span style="font-size:10px;color:var(--dim);align-self:center;margin-right:4px;text-transform:uppercase;letter-spacing:1px;">Top Tags:</span>
        <span style="background:rgba(0,232,122,0.1);border:1px solid rgba(0,232,122,0.25);color:var(--green);padding:3px 10px;font-size:11px;font-weight:600;border-radius:2px;"><i class="fas fa-check-circle" style="margin-right:4px;"></i>Reliable Builder <span style="opacity:0.6;">(31)</span></span>
        <span style="background:rgba(0,212,255,0.1);border:1px solid rgba(0,212,255,0.2);color:var(--cyan);padding:3px 10px;font-size:11px;font-weight:600;border-radius:2px;"><i class="fas fa-shield-alt" style="margin-right:4px;"></i>Trusted Encoder <span style="opacity:0.6;">(28)</span></span>
        <span style="background:rgba(255,208,0,0.1);border:1px solid rgba(255,208,0,0.2);color:var(--yellow);padding:3px 10px;font-size:11px;font-weight:600;border-radius:2px;"><i class="fas fa-star" style="margin-right:4px;"></i>Great Support <span style="opacity:0.6;">(19)</span></span>
        <span style="background:rgba(157,92,255,0.1);border:1px solid rgba(157,92,255,0.2);color:var(--purple);padding:3px 10px;font-size:11px;font-weight:600;border-radius:2px;"><i class="fas fa-code" style="margin-right:4px;"></i>Expert Tweaker <span style="opacity:0.6;">(17)</span></span>
        <span style="background:rgba(255,122,0,0.1);border:1px solid rgba(255,122,0,0.2);color:var(--orange);padding:3px 10px;font-size:11px;font-weight:600;border-radius:2px;"><i class="fas fa-bolt" style="margin-right:4px;"></i>Fast Delivery <span style="opacity:0.6;">(14)</span></span>
      </div>
      <!-- Vouch list -->
      <div style="display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border2);">
        <div class="vouch-av" style="border-color:var(--cyan);background:rgba(0,212,255,0.06);color:var(--cyan);">ZE</div>
        <div class="vouch-body">
          <div style="display:flex;align-items:center;gap:10px;margin-bottom:4px;">
            <span class="vouch-name" style="color:var(--cyan);">ZEFv</span>
            <span style="font-size:10px;color:var(--dim);">Developer</span>
            <span style="display:flex;gap:2px;margin-left:4px;"><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i></span>
          </div>
          <div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px;"><span style="background:rgba(0,232,122,0.08);border:1px solid rgba(0,232,122,0.2);color:var(--green);padding:1px 7px;font-size:10px;">Reliable Builder</span><span style="background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.15);color:var(--cyan);padding:1px 7px;font-size:10px;">Trusted Encoder</span></div>
          <div class="vouch-text">"Hook offsets always accurate, binaries tested properly before release. The most reliable encoder on the platform."</div>
        </div>
        <div class="vouch-time">Feb 15</div>
      </div>
      <div style="display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border2);">
        <div class="vouch-av" style="border-color:var(--orange);background:rgba(255,122,0,0.06);color:var(--orange);">MA</div>
        <div class="vouch-body">
          <div style="display:flex;align-items:center;gap:10px;margin-bottom:4px;">
            <span class="vouch-name" style="color:var(--orange);">Marshall</span>
            <span style="font-size:10px;color:var(--dim);">Owner</span>
            <span style="display:flex;gap:2px;margin-left:4px;"><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i></span>
          </div>
          <div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px;"><span style="background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.15);color:var(--cyan);padding:1px 7px;font-size:10px;">Trusted Encoder</span><span style="background:rgba(157,92,255,0.08);border:1px solid rgba(157,92,255,0.15);color:var(--purple);padding:1px 7px;font-size:10px;">Expert Tweaker</span></div>
          <div class="vouch-text">"Consistently delivers quality builds with detailed notes. One of the most valuable contributors to the library."</div>
        </div>
        <div class="vouch-time">Feb 10</div>
      </div>
      <div style="display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border2);">
        <div class="vouch-av" style="border-color:var(--green);background:rgba(0,232,122,0.06);color:var(--green);">SI</div>
        <div class="vouch-body">
          <div style="display:flex;align-items:center;gap:10px;margin-bottom:4px;">
            <span class="vouch-name" style="color:var(--green);">sipx</span>
            <span style="font-size:10px;color:var(--dim);">Moderator</span>
            <span style="display:flex;gap:2px;margin-left:4px;"><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i><i class="fas fa-star" style="color:var(--yellow);font-size:10px;"></i></span>
          </div>
          <div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px;"><span style="background:rgba(0,232,122,0.08);border:1px solid rgba(0,232,122,0.2);color:var(--green);padding:1px 7px;font-size:10px;">Reliable Builder</span><span style="background:rgba(255,208,0,0.08);border:1px solid rgba(255,208,0,0.15);color:var(--yellow);padding:1px 7px;font-size:10px;">Great Support</span></div>
          <div class="vouch-text">"Real deal encoder. Releases are always stable, notes are thorough, and he actually responds when you DM issues."</div>
        </div>
        <div class="vouch-time">Jan 30</div>
      </div>
      <div style="padding:10px 20px;border-top:1px solid var(--border2);display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--dim);">
        <span>Showing 3 of 47 vouches</span>
        <span style="color:var(--dim);">More vouches visible on full profile</span>
      </div>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════════════
  REPUTATION POPUP OVERLAY
══════════════════════════════════════════════════ -->
<div id="rep-popup-overlay" class="cp-overlay" onclick="if(event.target===this)closeRepPopup()" style="z-index:10000;">
  <div class="cp-shell" style="max-width:700px;width:95%;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;">
    <div class="cp-header">
      <div class="cp-header-brand"><i class="fas fa-star" style="color:var(--green);margin-right:8px;"></i> Reputation — iOS_Dev</div>
      <button class="cp-close-btn" onclick="closeRepPopup()"><i class="fas fa-times"></i></button>
    </div>
    <div style="overflow-y:auto;flex:1;">
      <!-- Rep overview -->
      <div style="padding:16px 20px;border-bottom:1px solid var(--border2);display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start;">
        <div>
          <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:12px;">
            <div style="font-family:'Oswald',sans-serif;font-size:42px;font-weight:700;color:var(--green);line-height:1;">+841</div>
            <div>
              <div style="font-size:12px;color:#fff;font-weight:600;margin-bottom:2px;">LEGENDARY TIER</div>
              <div style="font-size:10px;color:var(--dim);">159 rep until <span style="color:var(--yellow);">Mythic</span></div>
            </div>
          </div>
          <div style="margin-bottom:8px;">
            <div style="display:flex;justify-content:space-between;font-size:10px;color:var(--dim);margin-bottom:5px;"><span>Legendary (600)</span><span>Progress to Mythic (1000)</span></div>
            <div style="height:6px;background:var(--border);border-radius:3px;overflow:hidden;"><div style="height:100%;width:60%;background:linear-gradient(90deg,var(--green),var(--cyan));border-radius:3px;"></div></div>
          </div>
          <div style="display:flex;gap:0;margin-top:10px;">
            <div style="flex:1;padding:4px 6px;text-align:center;font-size:9px;background:rgba(255,122,0,0.12);border:1px solid rgba(255,122,0,0.2);color:var(--orange);font-weight:600;border-radius:2px 0 0 2px;">MEMBER<br><span style="font-weight:400;opacity:0.7;">0+</span></div>
            <div style="flex:1;padding:4px 6px;text-align:center;font-size:9px;background:rgba(0,212,255,0.1);border:1px solid rgba(0,212,255,0.15);color:var(--cyan);font-weight:600;border-left:none;">TRUSTED<br><span style="font-weight:400;opacity:0.7;">100+</span></div>
            <div style="flex:1;padding:4px 6px;text-align:center;font-size:9px;background:rgba(157,92,255,0.12);border:1px solid rgba(157,92,255,0.2);color:var(--purple);font-weight:600;border-left:none;">VETERAN<br><span style="font-weight:400;opacity:0.7;">300+</span></div>
            <div style="flex:1;padding:4px 6px;text-align:center;font-size:9px;background:rgba(0,232,122,0.15);border:1px solid rgba(0,232,122,0.3);color:var(--green);font-weight:700;border-left:none;">LEGENDARY<br><span style="font-weight:400;opacity:0.7;">600+</span></div>
            <div style="flex:1;padding:4px 6px;text-align:center;font-size:9px;background:rgba(255,208,0,0.05);border:1px solid rgba(255,208,0,0.1);color:rgba(255,208,0,0.4);font-weight:600;border-left:none;border-radius:0 2px 2px 0;">MYTHIC<br><span style="font-weight:400;opacity:0.7;">1000+</span></div>
          </div>
        </div>
        <div style="min-width:140px;">
          <div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;">Breakdown</div>
          <div style="display:flex;flex-direction:column;gap:7px;">
            <div style="display:flex;justify-content:space-between;align-items:center;font-size:12px;"><span style="color:var(--green);"><i class="fas fa-plus-circle" style="margin-right:5px;"></i>Positive</span><span style="font-weight:700;color:var(--green);">+862</span></div>
            <div style="display:flex;justify-content:space-between;align-items:center;font-size:12px;"><span style="color:var(--red);"><i class="fas fa-minus-circle" style="margin-right:5px;"></i>Negative</span><span style="font-weight:700;color:var(--red);">−21</span></div>
            <div style="height:1px;background:var(--border2);margin:2px 0;"></div>
            <div style="display:flex;justify-content:space-between;align-items:center;font-size:12px;"><span style="color:var(--dim);">Net</span><span style="font-weight:700;color:var(--green);">+841</span></div>
            <div style="height:1px;background:var(--border2);margin:2px 0;"></div>
            <div style="display:flex;justify-content:space-between;align-items:center;font-size:12px;"><span style="color:var(--dim);">Givers</span><span style="font-weight:600;color:#fff;">284</span></div>
            <div style="display:flex;justify-content:space-between;align-items:center;font-size:12px;"><span style="color:var(--dim);">This month</span><span style="font-weight:600;color:var(--cyan);">+62</span></div>
          </div>
        </div>
      </div>
      <!-- Rep entries -->
      <div style="padding:10px 20px 6px;display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--border2);">
        <div style="font-size:11px;color:var(--dim);">Filter:</div>
        <div style="display:flex;gap:6px;">
          <button style="background:rgba(0,232,122,0.1);border:1px solid rgba(0,232,122,0.25);color:var(--green);padding:3px 10px;font-size:11px;font-weight:600;cursor:pointer;">All</button>
          <button style="background:transparent;border:1px solid var(--border);color:var(--dim);padding:3px 10px;font-size:11px;cursor:pointer;">Positive</button>
          <button style="background:transparent;border:1px solid var(--border);color:var(--dim);padding:3px 10px;font-size:11px;cursor:pointer;">Negative</button>
        </div>
      </div>
      <div style="display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:11px 20px;border-bottom:1px solid var(--border2);">
        <div style="width:32px;height:32px;border-radius:50%;background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--cyan);">ZE</div>
        <div><div style="font-size:13px;color:#fff;font-weight:600;margin-bottom:2px;"><span style="color:var(--cyan);">ZEFv</span> <span style="font-size:10px;font-weight:400;color:var(--dim);">Developer · Feb 15</span></div><div style="font-size:12px;color:var(--grey);">+Rep for Spotify++ v8.9.12 — flawless build, full dylib transparency</div><div style="display:flex;gap:6px;margin-top:5px;"><span style="background:rgba(0,232,122,0.08);border:1px solid rgba(0,232,122,0.2);color:var(--green);padding:1px 7px;font-size:10px;border-radius:2px;">IPA Quality</span></div></div>
        <div style="text-align:right;"><div style="font-family:'Oswald',sans-serif;font-size:16px;font-weight:700;color:var(--green);">+5</div><div style="font-size:9px;color:var(--dim);">reputation</div></div>
      </div>
      <div style="display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:11px 20px;border-bottom:1px solid var(--border2);">
        <div style="width:32px;height:32px;border-radius:50%;background:rgba(255,122,0,0.08);border:1px solid rgba(255,122,0,0.2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--orange);">MA</div>
        <div><div style="font-size:13px;color:#fff;font-weight:600;margin-bottom:2px;"><span style="color:var(--orange);">Marshall</span> <span style="font-size:10px;font-weight:400;color:var(--dim);">Owner · Feb 10</span></div><div style="font-size:12px;color:var(--grey);">Reward for 200+ IPA milestone — library quality significantly improved</div><div style="display:flex;gap:6px;margin-top:5px;"><span style="background:rgba(255,122,0,0.08);border:1px solid rgba(255,122,0,0.15);color:var(--orange);padding:1px 7px;font-size:10px;border-radius:2px;">Milestone</span><span style="background:rgba(157,92,255,0.08);border:1px solid rgba(157,92,255,0.15);color:var(--purple);padding:1px 7px;font-size:10px;border-radius:2px;">Staff Award</span></div></div>
        <div style="text-align:right;"><div style="font-family:'Oswald',sans-serif;font-size:16px;font-weight:700;color:var(--green);">+25</div><div style="font-size:9px;color:var(--dim);">reputation</div></div>
      </div>
      <div style="display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:11px 20px;border-bottom:1px solid var(--border2);background:rgba(255,51,51,0.025);">
        <div style="width:32px;height:32px;border-radius:50%;background:rgba(136,153,170,0.08);border:1px solid rgba(136,153,170,0.2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--dim);">??</div>
        <div><div style="font-size:13px;color:#fff;font-weight:600;margin-bottom:2px;"><span style="color:var(--dim);">[Anonymous]</span> <span style="font-size:10px;font-weight:400;color:var(--dim);">Member · Jan 11</span></div><div style="font-size:12px;color:var(--grey);">Build crashed on iPhone 12 iOS 16.6 — acknowledged and fixed next release</div><div style="display:flex;gap:6px;margin-top:5px;"><span style="background:rgba(255,51,51,0.08);border:1px solid rgba(255,51,51,0.2);color:var(--red);padding:1px 7px;font-size:10px;border-radius:2px;">Build Issue</span></div></div>
        <div style="text-align:right;"><div style="font-family:'Oswald',sans-serif;font-size:16px;font-weight:700;color:var(--red);">−1</div><div style="font-size:9px;color:var(--dim);">reputation</div></div>
      </div>
      <div style="padding:10px 20px;border-top:1px solid var(--border2);display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--dim);">
        <span>Showing 3 of 284 entries</span>
        <span style="color:var(--dim);">More reputation history on full profile</span>
      </div>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════════════
  ACHIEVEMENTS POPUP OVERLAY
══════════════════════════════════════════════════ -->
<div id="achiev-popup-overlay" class="cp-overlay" onclick="if(event.target===this)closeAchievPopup()" style="z-index:10000;">
  <div class="cp-shell" style="max-width:750px;width:95%;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;">
    <div class="cp-header">
      <div class="cp-header-brand"><i class="fas fa-trophy" style="color:var(--yellow);margin-right:8px;"></i> Achievements — iOS_Dev</div>
      <button class="cp-close-btn" onclick="closeAchievPopup()"><i class="fas fa-times"></i></button>
    </div>
    <div style="overflow-y:auto;flex:1;" id="achiev-popup-body">
      <!-- XP progress -->
      <div style="padding:16px 20px;border-bottom:1px solid var(--border2);">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
          <div><span style="font-family:'Oswald',sans-serif;font-size:18px;font-weight:700;color:var(--yellow);">780 XP</span><span style="font-size:12px;color:var(--dim);margin-left:8px;">Level 14 · <span style="color:var(--yellow);">Gold Encoder</span></span></div>
          <div style="font-size:11px;color:var(--dim);">220 XP to Level 15</div>
        </div>
        <div style="height:8px;background:var(--border);border-radius:4px;overflow:hidden;"><div style="height:100%;width:78%;background:linear-gradient(90deg,var(--yellow),var(--orange));border-radius:4px;"></div></div>
        <div style="display:flex;justify-content:space-between;font-size:10px;color:var(--dim);margin-top:5px;"><span>Level 14 (760 XP)</span><span>Level 15 (1000 XP)</span></div>
      </div>
      <!-- Unlocked achievements grid -->
      <div style="padding:14px 20px 8px;">
        <div style="font-size:11px;color:var(--orange);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:12px;"><i class="fas fa-box-open"></i> Encoder</div>
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:18px;">
          <div id="popup-achiev-century-builder" style="background:rgba(255,208,0,0.06);border:2px solid rgba(255,208,0,0.25);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;transition:border-color 0.3s;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;">🏆</div><div><div style="font-size:12px;font-weight:700;color:#fff;margin-bottom:2px;">Century Builder</div><div style="font-size:10px;color:var(--dim);margin-bottom:6px;">Release 100 IPAs</div><div style="height:3px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:100%;background:var(--yellow);border-radius:2px;"></div></div><div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:3px;"><span>214/100</span><span style="color:var(--yellow);">+100 XP</span></div></div>
          </div>
          <div id="popup-achiev-25k-signs" style="background:rgba(255,122,0,0.06);border:2px solid rgba(255,122,0,0.25);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;transition:border-color 0.3s;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;">📦</div><div><div style="font-size:12px;font-weight:700;color:#fff;margin-bottom:2px;">25k Signs</div><div style="font-size:10px;color:var(--dim);margin-bottom:6px;">Your IPAs signed 25,000 times</div><div style="height:3px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:100%;background:var(--orange);border-radius:2px;"></div></div><div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:3px;"><span>31.4k/25k</span><span style="color:var(--orange);">+75 XP</span></div></div>
          </div>
          <div id="popup-achiev-50-dylibs" style="background:rgba(157,92,255,0.06);border:2px solid rgba(157,92,255,0.25);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;transition:border-color 0.3s;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;">🧬</div><div><div style="font-size:12px;font-weight:700;color:#fff;margin-bottom:2px;">50 Dylibs</div><div style="font-size:10px;color:var(--dim);margin-bottom:6px;">Build and release 50 dylibs</div><div style="height:3px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:100%;background:var(--purple);border-radius:2px;"></div></div><div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:3px;"><span>89/50</span><span style="color:var(--purple);">+80 XP</span></div></div>
          </div>
        </div>
        <div style="font-size:11px;color:var(--cyan);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:12px;border-top:1px solid var(--border2);padding-top:14px;"><i class="fas fa-users"></i> Community</div>
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:18px;">
          <div id="popup-achiev-100-vouches" style="background:rgba(0,232,122,0.06);border:2px solid rgba(0,232,122,0.25);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;transition:border-color 0.3s;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;">⭐</div><div><div style="font-size:12px;font-weight:700;color:#fff;margin-bottom:2px;">100 Vouches</div><div style="font-size:10px;color:var(--dim);margin-bottom:6px;">Receive 100 community vouches</div><div style="height:3px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:47%;background:var(--green);border-radius:2px;"></div></div><div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:3px;"><span>47/100</span><span style="color:var(--green);">+60 XP — In Progress</span></div></div>
          </div>
          <div id="popup-achiev-top-encoder" style="background:rgba(255,208,0,0.06);border:2px solid rgba(255,208,0,0.25);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;transition:border-color 0.3s;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;">🥇</div><div><div style="font-size:12px;font-weight:700;color:#fff;margin-bottom:2px;">Top Encoder 2025</div><div style="font-size:10px;color:var(--dim);margin-bottom:6px;">#1 encoder by annual signs</div><div style="height:3px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:100%;background:var(--yellow);border-radius:2px;"></div></div><div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:3px;"><span>Earned 2025</span><span style="color:var(--yellow);">+120 XP</span></div></div>
          </div>
          <div id="popup-achiev-5k-posts" style="background:rgba(0,212,255,0.06);border:2px solid rgba(0,212,255,0.2);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;transition:border-color 0.3s;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;">💬</div><div><div style="font-size:12px;font-weight:700;color:#fff;margin-bottom:2px;">5k Posts</div><div style="font-size:10px;color:var(--dim);margin-bottom:6px;">Post 5,000 times in the forum</div><div style="height:3px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:100%;background:var(--cyan);border-radius:2px;"></div></div><div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:3px;"><span>6,119/5k</span><span style="color:var(--cyan);">+50 XP</span></div></div>
          </div>
        </div>
        <div style="font-size:11px;color:var(--purple);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:12px;border-top:1px solid var(--border2);padding-top:14px;"><i class="fas fa-microchip"></i> Technical</div>
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:18px;">
          <div id="popup-achiev-hook-master" style="background:rgba(157,92,255,0.06);border:2px solid rgba(157,92,255,0.25);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;transition:border-color 0.3s;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;">🔮</div><div><div style="font-size:12px;font-weight:700;color:#fff;margin-bottom:2px;">Hook Master</div><div style="font-size:10px;color:var(--dim);margin-bottom:6px;">Write 10,000 successful hooks</div><div style="height:3px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:100%;background:var(--purple);border-radius:2px;"></div></div><div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:3px;"><span>412k hooks</span><span style="color:var(--purple);">+90 XP</span></div></div>
          </div>
          <div id="popup-achiev-ios17" style="background:rgba(0,212,255,0.06);border:2px solid rgba(0,212,255,0.2);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;transition:border-color 0.3s;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;">🍎</div><div><div style="font-size:12px;font-weight:700;color:#fff;margin-bottom:2px;">iOS 17 Pioneer</div><div style="font-size:10px;color:var(--dim);margin-bottom:6px;">First build live on iOS 17.0 day one</div><div style="height:3px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:100%;background:var(--cyan);border-radius:2px;"></div></div><div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:3px;"><span>Earned Sept 2023</span><span style="color:var(--cyan);">+70 XP</span></div></div>
          </div>
          <div id="popup-achiev-arm64" style="background:rgba(0,232,122,0.06);border:2px solid rgba(0,232,122,0.2);padding:12px;border-radius:3px;display:flex;gap:12px;align-items:flex-start;transition:border-color 0.3s;">
            <div style="font-size:24px;line-height:1;flex-shrink:0;">⚡</div><div><div style="font-size:12px;font-weight:700;color:#fff;margin-bottom:2px;">ARM64 Expert</div><div style="font-size:10px;color:var(--dim);margin-bottom:6px;">Build 20 arm64e-compatible dylibs</div><div style="height:3px;background:var(--border);border-radius:2px;overflow:hidden;"><div style="height:100%;width:100%;background:var(--green);border-radius:2px;"></div></div><div style="display:flex;justify-content:space-between;font-size:9px;color:var(--dim);margin-top:3px;"><span>34/20</span><span style="color:var(--green);">+65 XP</span></div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
/* ═══ VOUCH POPUP ═══ */
function openVouchPopup() {
  document.getElementById('vouch-popup-overlay').classList.add('open');
  document.body.style.overflow = 'hidden';
}
function closeVouchPopup() {
  document.getElementById('vouch-popup-overlay').classList.remove('open');
  document.body.style.overflow = '';
}

/* ═══ REPUTATION POPUP ═══ */
function openRepPopup() {
  document.getElementById('rep-popup-overlay').classList.add('open');
  document.body.style.overflow = 'hidden';
}
function closeRepPopup() {
  document.getElementById('rep-popup-overlay').classList.remove('open');
  document.body.style.overflow = '';
}

/* ═══ ACHIEVEMENTS POPUP ═══ */
function openAchievPopup(targetId) {
  document.getElementById('achiev-popup-overlay').classList.add('open');
  document.body.style.overflow = 'hidden';
  if (targetId) {
    // Remove any existing highlights
    document.querySelectorAll('[id^="popup-achiev-"]').forEach(function(el) {
      el.style.boxShadow = '';
      el.style.transform = '';
    });
    // Scroll to and highlight the target achievement
    var popupEl = document.getElementById('popup-' + targetId);
    if (popupEl) {
      setTimeout(function() {
        var body = document.getElementById('achiev-popup-body');
        if (body) {
          var offset = popupEl.offsetTop - body.offsetTop - 20;
          body.scrollTop = Math.max(0, offset);
        }
        popupEl.style.boxShadow = '0 0 0 3px var(--yellow), 0 0 20px rgba(255,208,0,0.3)';
        popupEl.style.transform = 'scale(1.02)';
        setTimeout(function() {
          popupEl.style.boxShadow = '';
          popupEl.style.transform = '';
        }, 2000);
      }, 100);
    }
  }
}
function closeAchievPopup() {
  document.getElementById('achiev-popup-overlay').classList.remove('open');
  document.body.style.overflow = '';
}

/* Close popups on Escape key */
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    closeVouchPopup();
    closeRepPopup();
    closeAchievPopup();
  }
});

// ══════════════════════════════════════
// AUTH — Login / Register
// ══════════════════════════════════════
let zsIsLoggedIn = <?php echo $loggedIn ? 'true' : 'false'; ?>;

function setAuthState(loggedIn) {
  zsIsLoggedIn = loggedIn;
  var deskUser  = document.getElementById('desk-user-panel');
  var deskGuest = document.getElementById('desk-guest-panel');
  if (deskUser)  deskUser.style.display  = loggedIn ? '' : 'none';
  if (deskGuest) deskGuest.style.display = loggedIn ? 'none' : 'flex';
  var mobUser    = document.getElementById('mob-userband-loggedin');
  var mobGuest   = document.getElementById('mob-userband-guest');
  var mobActions = document.querySelector('.zs-mob-actions');
  if (mobUser)    mobUser.style.display    = loggedIn ? '' : 'none';
  if (mobGuest)   mobGuest.style.display   = loggedIn ? 'none' : 'flex';
  if (mobActions) mobActions.style.display = loggedIn ? '' : 'none';
}

function doLogin() {
  var user   = document.getElementById('login-user').value.trim();
  var pass   = document.getElementById('login-pass').value;
  var errEl  = document.getElementById('login-error');
  var errMsg = document.getElementById('login-error-msg');
  if (!user || !pass) {
    errMsg.textContent = 'Please enter your username and password.';
    errEl.style.display = 'flex'; return;
  }
  errEl.style.display = 'none';
  var fd = new FormData();
  fd.append('action', 'login');
  fd.append('username', user);
  fd.append('password', pass);
  fetch('', { method: 'POST', body: fd })
    .then(function(r){ return r.json(); })
    .then(function(data){
      if (data.ok) {
        closeModal('modal-login');
        showToast('success', 'Welcome back!', 'Signed in as ' + user, 3500);
        setTimeout(function(){ location.reload(); }, 1200);
      } else {
        errMsg.textContent = data.msg || 'Invalid username or password.';
        errEl.style.display = 'flex';
      }
    })
    .catch(function(){ errMsg.textContent = 'Server error. Try again.'; errEl.style.display = 'flex'; });
}

function doRegister() {
  var user  = document.getElementById('reg-user').value.trim();
  var email = document.getElementById('reg-email').value.trim();
  var mdid  = document.getElementById('reg-mdid').value.trim();
  var p1    = document.getElementById('reg-pass1').value;
  var p2    = document.getElementById('reg-pass2').value;
  var terms = document.getElementById('reg-terms').checked;
  var errEl  = document.getElementById('reg-error');
  var errMsg = document.getElementById('reg-error-msg');
  function showErr(msg) { errMsg.textContent = msg; errEl.style.display = 'flex'; }
  if (!user || user.length < 3)                    return showErr('Username must be at least 3 characters.');
  if (!/^[a-zA-Z0-9_]+$/.test(user))               return showErr('Username may only contain letters, numbers, and underscores.');
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))   return showErr('Please enter a valid email address.');
  if (mdid && !/^MS-\d{4}-\d{2}$/.test(mdid))      return showErr('MDID format must be MS-XXXX-XX (e.g. MS-4872-09).');
  if (p1.length < 8)                               return showErr('Password must be at least 8 characters.');
  if (p1 !== p2)                                   return showErr('Passwords do not match.');
  if (!terms)                                      return showErr('You must agree to the Terms of Service.');
  errEl.style.display = 'none';
  var fd = new FormData();
  fd.append('action', 'register');
  fd.append('username', user);
  fd.append('email', email);
  fd.append('mdid', mdid);
  fd.append('pass1', p1);
  fd.append('pass2', p2);
  fetch('', { method: 'POST', body: fd })
    .then(function(r){ return r.json(); })
    .then(function(data){
      if (data.ok) {
        closeModal('modal-register');
        showToast('success', 'Account Created!', 'Welcome to MSIGN, ' + user + '!', 4000);
        setTimeout(function(){ location.reload(); }, 1500);
      } else {
        showErr(data.msg || 'Registration failed.');
      }
    })
    .catch(function(){ showErr('Server error. Try again.'); });
}

function doLogout() {
  var fd = new FormData();
  fd.append('action', 'logout');
  fetch('', { method: 'POST', body: fd })
    .then(function(){ location.reload(); })
    .catch(function(){ location.reload(); });
}

function updateRegPreview() {
  var u    = document.getElementById('reg-user').value.trim();
  var av   = document.getElementById('reg-av-preview');
  var hint = document.getElementById('reg-user-hint');
  av.textContent = u ? u.slice(0,2).toUpperCase() : '?';
  if (u) {
    if (u.length < 3 || !/^[a-zA-Z0-9_]+$/.test(u)) {
      hint.style.color='#ff5555'; hint.textContent='✗ Letters, numbers, _ only (min 3)';
    } else { hint.style.color='#00cc55'; hint.textContent='✓ Looks good'; }
    // Auto-fill email from username
    var emailEl = document.getElementById('reg-email');
    var badge   = document.getElementById('reg-email-auto-badge');
    var emailHint = document.getElementById('reg-email-hint');
    if (u.length >= 3 && /^[a-zA-Z0-9_]+$/.test(u)) {
      emailEl.value = u.toLowerCase() + '@msign.party';
      emailEl.style.color = 'var(--orange)';
      emailEl.style.borderColor = 'rgba(255,136,0,.4)';
      badge.style.display = 'inline-block';
      emailHint.style.color = 'var(--orange)';
      emailHint.textContent = 'Auto-generated from username · you can change this';
    } else {
      emailEl.value = '';
      emailEl.style.color = '';
      emailEl.style.borderColor = '';
      badge.style.display = 'none';
      emailHint.style.color = 'var(--dim)';
      emailHint.textContent = 'Type your username above to auto-fill';
    }
  } else {
    hint.textContent = '';
    document.getElementById('reg-email').value = '';
    document.getElementById('reg-email').style.color = '';
    document.getElementById('reg-email').style.borderColor = '';
    document.getElementById('reg-email-auto-badge').style.display = 'none';
    document.getElementById('reg-email-hint').textContent = 'Type your username above to auto-fill';
  }
}
function onRegEmailInput() {
  // User manually edited — remove auto badge, validate normally
  var email = document.getElementById('reg-email').value.trim();
  var badge = document.getElementById('reg-email-auto-badge');
  var hint  = document.getElementById('reg-email-hint');
  badge.style.display = 'none';
  document.getElementById('reg-email').style.color = '';
  document.getElementById('reg-email').style.borderColor = '';
  if (!email) { hint.textContent = ''; return; }
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    hint.style.color = '#ff5555'; hint.textContent = '✗ Invalid email';
  } else {
    hint.style.color = '#00cc55'; hint.textContent = '✓ Looks good';
  }
}
function validateRegEmail() { onRegEmailInput(); }

// MDID fetch — real device API (replace URL with your actual MDID endpoint)
var regMdidPool = []; // no mock pool
function regFetchMDID() {
  var btn   = document.getElementById('reg-mdid-btn');
  var input = document.getElementById('reg-mdid');
  var badge = document.getElementById('reg-mdid-badge');
  var hint  = document.getElementById('reg-mdid-hint');
  btn.disabled = true;
  btn.innerHTML = '<i class="fas fa-spinner fa-spin" style="font-size:9px;margin-right:3px;"></i>FETCHING';
  btn.style.color = 'var(--dim)';
  hint.style.color = 'var(--dim)';
  hint.textContent = 'Scanning device provisioning profile...';
  // TODO: implement real MDID fetch from device/API
  // For now show a clear error so user knows to enter manually
  setTimeout(function() {
    btn.disabled = false;
    btn.innerHTML = '<i class="fas fa-magic" style="font-size:9px;margin-right:3px;"></i>FETCH';
    btn.style.color = 'var(--orange)';
    hint.style.color = '#ff5555';
    hint.textContent = '✗ Auto-fetch unavailable — please enter your MDID manually';
  }, 1000);
}
function onRegMdidInput() {
  var v     = document.getElementById('reg-mdid').value.trim();
  var badge = document.getElementById('reg-mdid-badge');
  var hint  = document.getElementById('reg-mdid-hint');
  badge.style.display = 'none';
  document.getElementById('reg-mdid').style.color = '';
  document.getElementById('reg-mdid').style.borderColor = '';
  if (!v) { hint.style.color='var(--dim)'; hint.textContent='Found on your device under Settings → MSIGN · format: MS-XXXX-XX'; return; }
  if (/^MS-\d{4}-\d{2}$/.test(v)) {
    hint.style.color='#00cc55'; hint.textContent='✓ Valid MDID format';
    document.getElementById('reg-mdid').style.borderColor='rgba(0,204,85,.4)';
    document.getElementById('reg-mdid').style.color='var(--green)';
  } else {
    hint.style.color='#ff5555'; hint.textContent='✗ Format must be MS-XXXX-XX';
  }
}
function checkRegPass() {
  var p    = document.getElementById('reg-pass1').value;
  var bars = ['rsb1','rsb2','rsb3','rsb4','rsb5'];
  var cols = ['#cc0000','#ff4400','#ff8800','#88cc00','#00cc55'];
  var lbls = ['Very Weak','Weak','Fair','Strong','Very Strong'];
  var score = 0;
  if (p.length>=8)  score++; if (p.length>=12) score++;
  if (/[A-Z]/.test(p)) score++; if (/[0-9]/.test(p)) score++; if (/[^A-Za-z0-9]/.test(p)) score++;
  bars.forEach(function(id,i){ document.getElementById(id).style.background = i<score?(cols[score-1]||'#00cc55'):'#1e2530'; });
  var lbl = document.getElementById('reg-pass-label');
  lbl.textContent = p ? (lbls[score-1]||'Very Weak') : '—';
  lbl.style.color  = p ? (cols[score-1]||'#cc0000') : 'var(--dim)';
  checkRegMatch();
}
function checkRegMatch() {
  var p1=document.getElementById('reg-pass1').value, p2=document.getElementById('reg-pass2').value;
  var el=document.getElementById('reg-match-hint');
  if(!p2){el.textContent='';return;}
  el.style.color = p1===p2?'#00cc55':'#ff5555';
  el.textContent = p1===p2?'✓ Passwords match':'✗ Passwords do not match';
}
function toggleLoginPass() {
  var inp=document.getElementById('login-pass'), btn=document.getElementById('login-pass-eye');
  inp.type=inp.type==='password'?'text':'password';
  btn.innerHTML=inp.type==='password'?'<i class="fas fa-eye"></i>':'<i class="fas fa-eye-slash"></i>';
}
function toggleField(id,btn) {
  var inp=document.getElementById(id);
  inp.type=inp.type==='password'?'text':'password';
  btn.innerHTML=inp.type==='password'?'<i class="fas fa-eye"></i>':'<i class="fas fa-eye-slash"></i>';
}

// ══════════════════════════════════════
// IPA UPLOAD — Real file parse via PHP
// ══════════════════════════════════════
var ipaLoaded = false;

function simulateIPAUpload(file) {
  if (ipaLoaded) return;
  if (!file) {
    showToast('error', 'No File', 'Please select an IPA file.', 3000);
    return;
  }

  document.getElementById('ipa-drop-zone').style.pointerEvents = 'none';
  document.getElementById('ipa-drop-zone').style.opacity = '0.4';
  document.getElementById('ipa-parsing').style.display = 'block';
  document.getElementById('ipa-hints').style.display = 'none';

  var parseSteps = [
    [20,  'Uploading IPA...'],
    [45,  'Extracting payload...'],
    [65,  'Reading Info.plist...'],
    [82,  'Scanning entitlements...'],
    [95,  'Extracting MDID from provisioning profile...'],
    [100, 'Parse complete!'],
  ];
  var i = 0;
  function nextStep() {
    if (i >= parseSteps.length - 1) return;
    var s = parseSteps[i++];
    document.getElementById('ipa-parse-bar').style.width = s[0] + '%';
    document.getElementById('ipa-parse-status').textContent = s[1];
    setTimeout(nextStep, 400);
  }
  nextStep();

  var formData = new FormData();
  formData.append('action', 'parse_ipa');
  formData.append('ipa', file);

  fetch('', { method: 'POST', body: formData })
    .then(function(r) { return r.json(); })
    .then(function(data) {
      document.getElementById('ipa-parse-bar').style.width = '100%';
      document.getElementById('ipa-parse-status').textContent = 'Parse complete!';
      setTimeout(function() {
        if (data.ok) {
          showIPAParsed(data);
        } else {
          document.getElementById('ipa-parsing').style.display = 'none';
          document.getElementById('ipa-drop-zone').style.opacity = '1';
          document.getElementById('ipa-drop-zone').style.pointerEvents = 'auto';
          document.getElementById('ipa-hints').style.display = 'flex';
          showToast('error', 'Parse Failed', data.msg || 'Could not parse IPA.', 4000);
        }
      }, 400);
    })
    .catch(function(err) {
      document.getElementById('ipa-parsing').style.display = 'none';
      document.getElementById('ipa-drop-zone').style.opacity = '1';
      document.getElementById('ipa-drop-zone').style.pointerEvents = 'auto';
      document.getElementById('ipa-hints').style.display = 'flex';
      showToast('error', 'Upload Error', 'Network error. Please try again.', 4000);
    });
}

function showIPAParsed(data) {
  ipaLoaded = true;
  document.getElementById('ipa-parsing').style.display = 'none';
  document.getElementById('ipa-parsed').style.display = 'block';
  document.getElementById('ipa-drop-zone').style.display = 'none';

  document.getElementById('ipa-parsed-name').textContent    = data.name    || '—';
  document.getElementById('ipa-parsed-bundle').textContent  = data.bundle  || '—';
  document.getElementById('ipa-parsed-ver').textContent     = data.ver     || '—';
  document.getElementById('ipa-parsed-minos').textContent   = data.minos ? 'iOS ' + data.minos + '+' : '—';
  document.getElementById('ipa-parsed-arch').textContent    = data.arch    || 'arm64';
  document.getElementById('ipa-parsed-ent').textContent     = (data.ent || '0') + ' keys';
  document.getElementById('ipa-parsed-size').textContent    = data.size    || '—';
  document.getElementById('ipa-parsed-mdid').textContent    = data.mdid    || '—';

  // Auto-fill MDID if present
  if (data.mdid) {
    document.getElementById('sign-mdid').value = data.mdid;
    document.getElementById('sign-mdid').style.borderColor = 'rgba(0,204,85,.4)';
    document.getElementById('sign-mdid').style.color = 'var(--green)';
    document.getElementById('mdid-fetch-badge').style.display = 'inline-block';
  }

  // Auto-fill confirm summary
  document.getElementById('confirm-name').textContent   = data.name   || '—';
  document.getElementById('confirm-bundle').textContent = (data.bundle || '—') + ' · ' + (data.ver || '—') + ' · ' + (data.size || '—');
  document.getElementById('confirm-icon').innerHTML     = '<span style="font-size:26px;">📦</span>';
  document.getElementById('confirm-icon').style.background = '#111';

  showToast('success', 'IPA Parsed', 'Metadata extracted from your IPA.', 3500);
}

function resetIPAUpload(e) {
  e.preventDefault();
  ipaLoaded = false;
  document.getElementById('ipa-parsed').style.display = 'none';
  document.getElementById('ipa-parsing').style.display = 'none';
  document.getElementById('ipa-hints').style.display = 'flex';
  document.getElementById('ipa-drop-zone').style.display = 'block';
  document.getElementById('ipa-drop-zone').style.opacity = '1';
  document.getElementById('ipa-drop-zone').style.pointerEvents = 'auto';
  document.getElementById('ipa-drop-zone').style.borderColor = 'var(--border)';
  document.getElementById('sign-mdid').value = '';
  document.getElementById('sign-mdid').style.borderColor = 'var(--border)';
  document.getElementById('sign-mdid').style.color = '#fff';
  document.getElementById('mdid-fetch-badge').style.display = 'none';
}

function copyIPAMDID() {
  var mdid = document.getElementById('ipa-parsed-mdid').textContent;
  navigator.clipboard.writeText(mdid).then(function() {
    showToast('success', 'Copied', 'MDID copied to clipboard.', 2000);
  }).catch(function() {
    showToast('info', 'MDID', mdid, 4000);
  });
}

// "Fetch from IPA" button in Step 2 MDID row — triggers the upload tab + parse
function fetchMDIDFromIPA(e) {
  e.preventDefault();
  switchSignTab('upload');
  if (!ipaLoaded) {
    showToast('info', 'Upload IPA', 'Click the drop zone to select an IPA and auto-fetch your MDID.', 3500);
  }
}

// Prefill email from account on page load
document.addEventListener('DOMContentLoaded', function() {
  var emailEl = document.getElementById('sign-email');
  if (emailEl && !emailEl.value) emailEl.value = <?php echo json_encode($loggedIn ? ($user['email'] ?? '') : ''); ?>;
});

// Initialise auth state
setAuthState(zsIsLoggedIn);
</script>
</body>
</html>