<?php
/**
 * evaluate.php — X Account Evaluator
 * POST → store evaluation pushed from x-evaluate.js
 * GET  → display evaluation UI at aptum.fun/evaluate
 */

$_secret = getenv('FEED_PUSH_SECRET')
    ?: (($f = __DIR__ . '/.push_secret') && file_exists($f) ? trim(file_get_contents($f)) : '');
if (!$_secret) { header('Content-Type: application/json'); http_response_code(500); echo json_encode(['error'=>'Server misconfigured']); exit; }
define('PUSH_SECRET',  $_secret);
define('EVAL_DIR',     __DIR__ . '/evaluations/');
define('MAX_EVALS',    200);
define('RATE_DIR',     sys_get_temp_dir() . '/aptum_rl/');
define('RATE_LIMIT',   5);   // max new evaluations per IP per hour
define('RATE_WINDOW',  3600);

// Security headers
header('X-Frame-Options: DENY');
header('X-Content-Type-Options: nosniff');
header('Referrer-Policy: strict-origin-when-cross-origin');

/** Simple file-based rate limiting — returns true if IP is allowed */
function checkRateLimit(string $ip): bool {
    if (!is_dir(RATE_DIR)) @mkdir(RATE_DIR, 0700, true);
    $file = RATE_DIR . md5($ip) . '.json';
    $now  = time();
    $data = [];
    if (file_exists($file)) {
        $data = json_decode(file_get_contents($file), true) ?: [];
    }
    // Purge entries outside window
    $data = array_values(array_filter($data, fn($t) => ($now - $t) < RATE_WINDOW));
    if (count($data) >= RATE_LIMIT) return false;
    $data[] = $now;
    file_put_contents($file, json_encode($data));
    return true;
}

if (!is_dir(EVAL_DIR)) mkdir(EVAL_DIR, 0755, true);

// ── Status check (AJAX polling for pending evaluations) ───────────────────────
if (($_GET['check'] ?? '') === '1') {
    header('Content-Type: application/json');
    $u = preg_replace('/[^a-zA-Z0-9_]/', '', ltrim($_GET['u'] ?? '', '@'));
    $done = $u && file_exists(EVAL_DIR . strtolower($u) . '.json');
    echo json_encode(['done' => $done]); exit;
}
if (($_GET['check'] ?? '') === 'reeval') {
    header('Content-Type: application/json');
    $u = preg_replace('/[^a-zA-Z0-9_]/', '', ltrim($_GET['u'] ?? '', '@'));
    $jf = EVAL_DIR . strtolower($u) . '.json';
    $rf = EVAL_DIR . strtolower($u) . '.reeval';
    $done = $u && file_exists($jf) && file_exists($rf) && filemtime($jf) > filemtime($rf);
    echo json_encode(['done' => $done]); exit;
}

// ── Image proxy (same-origin for html2canvas) ─────────────────────────────────
if (($_GET['proxy'] ?? '') === '1') {
    $raw = $_GET['imgurl'] ?? '';
    // Only allow twitter/x avatar hosts
    if (!preg_match('#^https://[a-z0-9.\-]*(twimg\.com|unavatar\.io|abs\.twimg\.com|pbs\.twimg\.com)/#i', $raw)) {
        http_response_code(403); exit;
    }
    $img = @file_get_contents($raw, false, stream_context_create([
        'http' => ['timeout' => 6, 'header' => "User-Agent: Mozilla/5.0\r\n"]
    ]));
    if (!$img) { http_response_code(502); exit; }
    $finfo = new finfo(FILEINFO_MIME_TYPE);
    $mime  = $finfo->buffer($img) ?: 'image/jpeg';
    header("Content-Type: $mime");
    header('Cache-Control: public, max-age=3600');
    echo $img; exit;
}

// ── POST: receive evaluation from x-evaluate.js ──────────────────────────────
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    header('Content-Type: application/json');
    $data = json_decode(file_get_contents('php://input'), true);
    if (!$data || ($data['secret'] ?? '') !== PUSH_SECRET) {
        http_response_code(403); echo json_encode(['error' => 'Forbidden']); exit;
    }
    unset($data['secret']);
    $username = preg_replace('/[^a-zA-Z0-9_]/', '', $data['username'] ?? '');
    if (!$username) { http_response_code(400); echo json_encode(['error' => 'No username']); exit; }
    $file = EVAL_DIR . strtolower($username) . '.json';
    file_put_contents($file, json_encode($data, JSON_PRETTY_PRINT));
    echo json_encode(['ok' => true, 'username' => $username]); exit;
}

// ── PUT: receive screenshot pushed from VPS evaluate-server ──────────────────
if ($_SERVER['REQUEST_METHOD'] === 'PUT' && ($_GET['action'] ?? '') === 'store_screenshot') {
    $auth = trim(str_replace('Bearer ', '', $_SERVER['HTTP_AUTHORIZATION'] ?? ''));
    if ($auth !== PUSH_SECRET) { http_response_code(403); exit; }
    $u = preg_replace('/[^a-zA-Z0-9_]/', '', $_GET['u'] ?? '');
    if (!$u) { http_response_code(400); exit; }
    $png = file_get_contents('php://input');
    if (!$png || substr($png, 0, 4) !== "\x89PNG") { http_response_code(400); echo 'Not a PNG'; exit; }
    file_put_contents(EVAL_DIR . strtolower($u) . '.png', $png);
    header('Content-Type: application/json');
    echo json_encode(['ok' => true, 'username' => $u, 'bytes' => strlen($png)]); exit;
}

// ── Screenshot: serve stored PNG (pushed by VPS after evaluation) ─────────────
if (($_GET['screenshot'] ?? '') === '1') {
    $u = preg_replace('/[^a-zA-Z0-9_]/', '', $_GET['u'] ?? '');
    if (!$u) { http_response_code(400); exit; }
    $pngFile = EVAL_DIR . strtolower($u) . '.png';
    if (!file_exists($pngFile)) {
        http_response_code(404);
        header('Content-Type: text/plain');
        echo 'Card image not ready. Please wait a moment and try again.';
        exit;
    }
    header('Content-Type: image/png');
    header('Content-Disposition: attachment; filename="aptum-@' . $u . '.png"');
    header('Cache-Control: public, max-age=300');
    readfile($pngFile); exit;
}

// ── GET: display ─────────────────────────────────────────────────────────────
$recent = [];
$query    = trim($_GET['u'] ?? '');
$query    = preg_replace('/[^a-zA-Z0-9_]/', '', ltrim($query, '@'));
$evalData = null;
$error    = null;
$pending  = false;
$triggered = false;
$reevalPending = false;

if ($query) {
    $file = EVAL_DIR . strtolower($query) . '.json';
    if (file_exists($file)) {
        $evalData = json_decode(file_get_contents($file), true);
        $pendingFile = EVAL_DIR . strtolower($query) . '.pending';
        if (file_exists($pendingFile)) @unlink($pendingFile);

        // Re-evaluate: 24h availability check
        $scannedTs        = strtotime($evalData['scannedAt'] ?? '1970-01-01');
        $reevalAvailableTs = $scannedTs + 86400;
        $canReeval        = time() >= $reevalAvailableTs;
        $reevalFile       = EVAL_DIR . strtolower($query) . '.reeval';
        $reevalPending    = file_exists($reevalFile) && filemtime($reevalFile) > filemtime($file);

        if (isset($_GET['force'])) {
            if (!$canReeval) {
                $error = 'Re-evaluate available ' . gmdate('M j \a\t H:i', $reevalAvailableTs) . ' UTC.';
            } else {
                $ipR = trim(explode(',', $_SERVER['HTTP_X_FORWARDED_FOR'] ?? $_SERVER['REMOTE_ADDR'] ?? 'unknown')[0]);
                if (!checkRateLimit($ipR)) {
                    $error = 'Too many requests. Please wait before re-evaluating.';
                } else {
                    $ctxR = stream_context_create(['http' => [
                        'method'  => 'POST',
                        'header'  => "Content-Type: application/json\r\nAuthorization: Bearer " . PUSH_SECRET . "\r\n",
                        'content' => json_encode(['action' => 'queue', 'username' => $query, 'force' => true]),
                        'timeout' => 5, 'ignore_errors' => true,
                    ]]);
                    $rspR = @file_get_contents('https://aptum.fun/evaluate-queue.php', false, $ctxR);
                    $jR   = $rspR ? json_decode($rspR, true) : null;
                    if ($jR && ($jR['ok'] ?? false)) {
                        file_put_contents($reevalFile, json_encode(['ts' => time()]));
                        header('Location: /evaluate?u=' . urlencode($query));
                        exit;
                    } else {
                        $error = 'Re-evaluation service unavailable. Try again shortly.';
                    }
                }
            }
        }
    } else {
        $pendingFile = EVAL_DIR . strtolower($query) . '.pending';
        if (file_exists($pendingFile) && (time() - filemtime($pendingFile)) < 300) {
            $pending = true;
        } else {
            // Rate limit new evaluation triggers (not cached or already pending)
            $ip = $_SERVER['HTTP_X_FORWARDED_FOR'] ?? $_SERVER['REMOTE_ADDR'] ?? 'unknown';
            $ip = trim(explode(',', $ip)[0]); // use first IP if behind proxy
            if (!checkRateLimit($ip)) {
                $error = "Too many evaluations. Please wait before evaluating more accounts.";
                goto renderPage;
            }
            $ctx = stream_context_create(['http' => [
                'method'  => 'POST',
                'header'  => "Content-Type: application/json\r\nAuthorization: Bearer " . PUSH_SECRET . "\r\n",
                'content' => json_encode(['action' => 'queue', 'username' => $query]),
                'timeout' => 5,
                'ignore_errors' => true,
            ]]);
            $resp = @file_get_contents('https://aptum.fun/evaluate-queue.php', false, $ctx);
            $json = $resp ? json_decode($resp, true) : null;
            if ($json && ($json['ok'] ?? false)) {
                file_put_contents($pendingFile, json_encode(['job_id' => $json['job_id'] ?? '', 'ts' => time()]));
                $pending   = true;
                $triggered = true;
            } else {
                $error = "Evaluation service unavailable. Try again shortly.";
            }
        }
    }
}

// list all evaluations sorted by score descending (leaderboard)
$recent = [];
foreach (glob(EVAL_DIR . '*.json') as $f) {
    if (basename($f) === 'queue.json') continue;
    $d = json_decode(file_get_contents($f), true);
    if ($d && isset($d['evaluation'])) {
        $ev   = $d['evaluation'];
        $pr   = $d['profile'] ?? [];
        $rpt  = $ev['report'] ?? [];
        $overall = (float)($ev['overall'] ?? 0);

        // Parse follower count to raw integer for scoring
        $fraw = strtoupper(trim($pr['followers'] ?? '0'));
        $fn = 0;
        if (preg_match('/^([\d,.]+)([KkMm]?)$/', $fraw, $fm)) {
            $fn = (float)str_replace(',', '', $fm[1]);
            if (strtolower($fm[2]) === 'k') $fn *= 1000;
            if (strtolower($fm[2]) === 'm') $fn *= 1000000;
        }

        // Parse ER percentage (e.g. "2.3%" or "2.3")
        $erRaw  = preg_replace('/[^0-9.]/', '', $rpt['weighted_er_pct'] ?? '0');
        $er     = (float)($erRaw ?: 0);
        $algoR  = (int)($rpt['algo_risk_score'] ?? 50);

        // Composite aptum rank score (0–10): AI score + real-world signals
        $erScore       = min($er / 5.0, 1.0) * 10;
        $safetyScore   = (1 - $algoR / 100) * 10;
        $followerScore = min(log10(max($fn, 1)) / 6.0, 1.0) * 10;
        $aptumScore    = $overall * 0.50 + $erScore * 0.20 + $safetyScore * 0.15 + $followerScore * 0.15;

        // Dimension scores (up to 5)
        $dims = array_slice(array_values($ev['dimensions'] ?? []), 0, 5);

        $recent[] = [
            'username'     => $d['username'] ?? basename($f, '.json'),
            'scannedAt'    => $d['scannedAt'] ?? null,
            'overall'      => $overall,
            'aptumScore'   => round($aptumScore, 2),
            'grade'        => $ev['grade'] ?? null,
            'niche'        => $ev['niche'] ?? null,
            'followers'    => $pr['followers'] ?? null,
            'pfpUrl'       => $pr['pfpUrl'] ?? null,
            'er'           => $er > 0 ? number_format($er, 1) . '%' : null,
            'algoRisk'     => $algoR,
            'dims'         => array_map(fn($dm) => [
                'label' => $dm['label'] ?? '',
                'score' => (float)($dm['score'] ?? 0),
            ], $dims),
        ];
    }
}
usort($recent, fn($a, $b) => ($b['aptumScore'] ?? 0) <=> ($a['aptumScore'] ?? 0));

// ── Background selection ─────────────────────────────────────────────────────
function nicheToBgStyle(string $niche, float $score): string {
    $n = strtolower($niche);
    if ($score >= 8.5)                                                          return 'gold';
    if (preg_match('/nft|collect|holder|pfp|holo|iridescen/', $n))             return 'iridescent';
    if (preg_match('/meme|viral|chaos|troll|funny|satire/', $n))               return 'glitch';
    if (preg_match('/game|gaming|gamefi|play|guild|esport/', $n))              return 'neon';
    if (preg_match('/art|visual|design|creat|generative|photo/', $n))          return 'liquid';
    if (preg_match('/music|audio|sound|film|cinema|record/', $n))              return 'analog';
    if (preg_match('/writ|think|essay|opinion|philosoph|media|journal/', $n))  return 'minimal';
    if (preg_match('/nature|eco|organic|sustain|green|biopunk|bio/', $n))      return 'nature';
    if (preg_match('/ai|tech|build|dev|code|engineer|software/', $n))         return 'cosmic';
    if (preg_match('/lifestyle|fashion|travel|food|personal|life/', $n))       return 'iridescent';
    if (preg_match('/alpha|signal|call|trade|market|insight|hunter/', $n))     return 'fire';
    if (preg_match('/manga|anime|pop|japan|cartoon|weeb/', $n))                return 'manga';
    // crypto/defi/web3 default → cyber
    return 'cyber';
}

function pickBg(string $style, string $username): string {
    static $manifest = null;
    if ($manifest === null) {
        $mf = __DIR__ . '/backgrounds/manifest.json';
        $manifest = file_exists($mf) ? (json_decode(file_get_contents($mf), true) ?? []) : [];
    }
    $pool = $manifest[$style] ?? [];
    if (empty($pool)) return '';
    // Deterministic per-user pick so the same user always gets the same card
    $idx = abs(crc32($username)) % count($pool);
    return '/backgrounds/' . $pool[$idx];
}

// Accent colors per style
function styleAccent(string $style): string {
    return match($style) {
        'cyber'      => '#00FF94',
        'neon'       => '#FF3CAC',
        'iridescent' => '#B8A9FF',
        'glitch'     => '#FF4040',
        'cosmic'     => '#00C8FF',
        'analog'     => '#FF8C00',
        'minimal'    => '#0A0C10',
        'liquid'     => '#00C8FF',
        'fire'       => '#FF6B00',
        'nature'     => '#39D353',
        'gold'       => '#FFD700',
        'manga'      => '#FF3CAC',
        default      => '#00FF94',
    };
}

// Card rarity helpers
function cardRarity(string $followers, float $score): string {
    $f = strtoupper(trim($followers));
    $n = 0;
    if (preg_match('/^([\d,.]+)([KkMm]?)$/', $f, $m)) {
        $n = (float)str_replace(',', '', $m[1]);
        if (strtolower($m[2]) === 'k') $n *= 1000;
        if (strtolower($m[2]) === 'm') $n *= 1000000;
    }
    if ($score >= 8.5 || $n >= 100000) return 'legendary';
    if ($score >= 7.5 || $n >= 10000)  return 'epic';
    if ($score >= 6.0 || $n >= 1000)   return 'rare';
    if ($score >= 4.5 || $n >= 200)    return 'uncommon';
    return 'common';
}
function rarityColor(string $rarity): string {
    return match($rarity) {
        'legendary' => '#FFD700',
        'epic'      => '#B47FFF',
        'rare'      => '#00C8FF',
        'uncommon'  => '#39D353',
        default     => '#8A8FA8',
    };
}
function rarityGlow(string $rarity): string {
    return match($rarity) {
        'legendary' => '0 0 0 2px #FFD700,0 0 60px 14px rgba(255,215,0,.40)',
        'epic'      => '0 0 0 2px #B47FFF,0 0 50px 10px rgba(180,127,255,.32)',
        'rare'      => '0 0 0 2px #00C8FF,0 0 40px 8px rgba(0,200,255,.25)',
        'uncommon'  => '0 0 0 2px #39D353,0 0 28px 6px rgba(57,211,83,.20)',
        default     => '0 0 0 1px rgba(138,143,168,.25)',
    };
}
// ── Effect Engine ─────────────────────────────────────────────────────────────
// Per-style visual profile: image filter, halftone dot colors, frost base,
// color wash (mix-blend-mode:screen), film grain opacity, vignette.
function cardStyleProfile(string $style): array {
    $profiles = [
        'cyber' => [
            'img_filter'    => 'grayscale(0.45) brightness(0.82) contrast(1.22) saturate(1.3)',
            'dot1'          => 'rgba(0,230,100,.46)',
            'dot2'          => 'rgba(0,230,100,.17)',
            'frost_from'    => 'rgba(0,14,6,.58)',
            'frost_to'      => 'rgba(0,8,4,.64)',
            'wash'          => 'rgba(0,255,120,.07)',
            'grain_opacity' => '.085',
        ],
        'neon' => [
            'img_filter'    => 'brightness(0.76) contrast(1.25) saturate(1.6) hue-rotate(8deg)',
            'dot1'          => 'rgba(220,70,255,.44)',
            'dot2'          => 'rgba(220,70,255,.16)',
            'frost_from'    => 'rgba(14,0,16,.58)',
            'frost_to'      => 'rgba(8,0,12,.65)',
            'wash'          => 'rgba(255,60,200,.07)',
            'grain_opacity' => '.075',
        ],
        'glitch' => [
            'img_filter'    => 'grayscale(0.25) brightness(0.78) contrast(1.35) saturate(1.5)',
            'dot1'          => 'rgba(255,50,50,.46)',
            'dot2'          => 'rgba(255,50,50,.17)',
            'frost_from'    => 'rgba(16,0,0,.60)',
            'frost_to'      => 'rgba(10,0,0,.66)',
            'wash'          => 'rgba(255,30,30,.07)',
            'grain_opacity' => '.095',
        ],
        'cosmic' => [
            'img_filter'    => 'brightness(0.78) contrast(1.22) saturate(1.4)',
            'dot1'          => 'rgba(0,180,255,.44)',
            'dot2'          => 'rgba(0,180,255,.16)',
            'frost_from'    => 'rgba(0,6,16,.58)',
            'frost_to'      => 'rgba(0,3,10,.65)',
            'wash'          => 'rgba(0,200,255,.07)',
            'grain_opacity' => '.065',
        ],
        'analog' => [
            'img_filter'    => 'sepia(0.45) brightness(0.84) contrast(1.12) saturate(1.25)',
            'dot1'          => 'rgba(255,150,30,.44)',
            'dot2'          => 'rgba(255,150,30,.16)',
            'frost_from'    => 'rgba(16,8,0,.58)',
            'frost_to'      => 'rgba(10,4,0,.65)',
            'wash'          => 'rgba(255,120,0,.06)',
            'grain_opacity' => '.090',
        ],
        'fire' => [
            'img_filter'    => 'brightness(0.80) contrast(1.25) saturate(1.5) hue-rotate(-8deg)',
            'dot1'          => 'rgba(255,110,0,.46)',
            'dot2'          => 'rgba(255,110,0,.17)',
            'frost_from'    => 'rgba(16,4,0,.60)',
            'frost_to'      => 'rgba(10,2,0,.66)',
            'wash'          => 'rgba(255,80,0,.07)',
            'grain_opacity' => '.075',
        ],
        'gold' => [
            'img_filter'    => 'sepia(0.35) brightness(0.82) contrast(1.18) saturate(1.4)',
            'dot1'          => 'rgba(255,205,50,.44)',
            'dot2'          => 'rgba(255,205,50,.16)',
            'frost_from'    => 'rgba(14,10,0,.58)',
            'frost_to'      => 'rgba(8,6,0,.64)',
            'wash'          => 'rgba(255,200,0,.06)',
            'grain_opacity' => '.065',
        ],
        'iridescent' => [
            'img_filter'    => 'brightness(0.80) contrast(1.18) saturate(1.3)',
            'dot1'          => 'rgba(180,155,255,.44)',
            'dot2'          => 'rgba(180,155,255,.16)',
            'frost_from'    => 'rgba(8,4,16,.58)',
            'frost_to'      => 'rgba(4,2,12,.64)',
            'wash'          => 'rgba(160,140,255,.06)',
            'grain_opacity' => '.065',
        ],
        'liquid' => [
            'img_filter'    => 'brightness(0.80) contrast(1.20) saturate(1.35)',
            'dot1'          => 'rgba(0,200,255,.44)',
            'dot2'          => 'rgba(0,200,255,.16)',
            'frost_from'    => 'rgba(0,8,16,.58)',
            'frost_to'      => 'rgba(0,4,10,.65)',
            'wash'          => 'rgba(0,200,255,.06)',
            'grain_opacity' => '.065',
        ],
        'nature' => [
            'img_filter'    => 'brightness(0.82) contrast(1.15) saturate(1.4)',
            'dot1'          => 'rgba(57,211,83,.44)',
            'dot2'          => 'rgba(57,211,83,.16)',
            'frost_from'    => 'rgba(0,10,4,.58)',
            'frost_to'      => 'rgba(0,6,2,.64)',
            'wash'          => 'rgba(40,200,60,.06)',
            'grain_opacity' => '.065',
        ],
        'minimal' => [
            'img_filter'    => 'grayscale(0.7) brightness(0.85) contrast(1.22)',
            'dot1'          => 'rgba(210,210,228,.42)',
            'dot2'          => 'rgba(210,210,228,.16)',
            'frost_from'    => 'rgba(8,8,12,.62)',
            'frost_to'      => 'rgba(4,4,8,.68)',
            'wash'          => 'rgba(200,200,220,.05)',
            'grain_opacity' => '.055',
        ],
        'manga' => [
            'img_filter'    => 'brightness(0.76) contrast(1.28) saturate(1.5)',
            'dot1'          => 'rgba(255,60,172,.44)',
            'dot2'          => 'rgba(255,60,172,.16)',
            'frost_from'    => 'rgba(14,0,12,.60)',
            'frost_to'      => 'rgba(8,0,8,.66)',
            'wash'          => 'rgba(255,60,172,.06)',
            'grain_opacity' => '.075',
        ],
    ];
    return $profiles[$style] ?? $profiles['cyber'];
}

function relTime(?string $iso): string {
    if (!$iso) return '';
    $d = time() - strtotime($iso);
    if ($d < 60)    return $d . 's ago';
    if ($d < 3600)  return floor($d/60) . 'm ago';
    if ($d < 86400) return floor($d/3600) . 'h ago';
    return floor($d/86400) . 'd ago';
}
function scoreColor(float $s): string {
    if ($s >= 7) return '#0B7A42';
    if ($s >= 5) return 'rgba(10,12,18,0.55)';
    return '#B91C1C';
}
function scoreBg(float $s): string {
    if ($s >= 7) return 'rgba(11,122,66,0.07)';
    if ($s >= 5) return 'transparent';
    return 'rgba(185,28,28,0.06)';
}
function barPct(float $s): int { return (int)(($s / 10) * 100); }

renderPage:
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<?php if ($evalData): $ev2 = $evalData['evaluation']; ?>
<title>@<?= htmlspecialchars($evalData['username']) ?> — <?= number_format((float)($ev2['overall']??0),1) ?>/10 — aptum_</title>
<meta property="og:title" content="@<?= htmlspecialchars($evalData['username']) ?> scored <?= number_format((float)($ev2['overall']??0),1) ?>/10">
<meta property="og:description" content="<?= htmlspecialchars(substr($ev2['summary']??'',0,160)) ?>">
<?php else: ?>
<title>Evaluate — aptum_</title>
<meta property="og:title" content="X Account Evaluator — aptum_">
<meta property="og:description" content="Drop any X handle. Get a brutally honest AI evaluation, score, and growth roadmap.">
<meta name="description" content="Drop any X handle. Get a brutally honest AI evaluation, score, and growth roadmap.">
<?php endif; ?>
<meta property="og:image" content="https://aptum.fun/eva.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://aptum.fun/eva.png">
<meta name="twitter:site" content="@aptum_">
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:   #F4F5F8;--bg1:  #ECEEF3;--bg2:  #FFFFFF;--bg3:  #F8F9FB;
  --bdr:  rgba(9,11,16,0.12);--bdr2: rgba(9,11,16,0.22);--bdr3: rgba(9,11,16,0.30);
  --ink:  #0A0C12;--ink2: rgba(10,12,18,0.80);--ink3: rgba(10,12,18,0.62);
  --ink4: rgba(10,12,18,0.45);--ink5: rgba(10,12,18,0.20);
  --green:#0B7A42;--green-bg:rgba(11,122,66,0.08);--red:#B91C1C;
  --mono:'IBM Plex Mono',monospace;--disp:'Syne',sans-serif;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

html,body{height:100%;scrollbar-width:none;}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
body{background:var(--bg);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(9,11,16,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(9,11,16,.05) 1px,transparent 1px);
  background-size:48px 48px;}

/* TOP BAR */
.topbar{position:fixed;top:0;left:0;right:0;z-index:300;height:32px;background:var(--ink);display:flex;align-items:center;}
.tb-item{display:flex;align-items:center;gap:6px;padding:0 16px;height:32px;border-right:1px solid rgba(255,255,255,.07);font-size:9.5px;letter-spacing:.1em;color:rgba(255,255,255,.35);}
.tb-val{font-weight:700;color:rgba(255,255,255,.80);}
.tb-live-dot{width:5px;height:5px;border-radius:50%;background:#34D399;animation:blink 2.5s infinite;flex-shrink:0;}
#tb-clock{font-size:9.5px;color:rgba(255,255,255,.22);letter-spacing:.1em;margin-left:auto;padding-right:16px;}

/* NAVBAR */
.navbar{position:fixed;top:32px;left:0;right:0;z-index:200;height:52px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1.5px solid var(--bdr2);display:flex;align-items:stretch;}
.brand{display:flex;align-items:center;gap:10px;padding:0 24px;border-right:1px solid var(--bdr2);text-decoration:none;}
.brand-name{font-family:var(--disp);font-size:15px;font-weight:800;letter-spacing:.16em;color:var(--ink);}
.brand-pill{font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:2px 9px;background:var(--ink);color:#fff;}
.nav-end{margin-left:auto;display:flex;align-items:center;padding:0 24px;gap:22px;}
.nav-a{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink4);text-decoration:none;transition:color .12s;}
.nav-a:hover{color:var(--ink);}
.nav-a.active{color:var(--ink);}

/* PAGE */
.page{position:relative;z-index:10;max-width:880px;margin:0 auto;padding:104px 18px 80px;overflow-x:hidden;}

/* HERO SEARCH */
.hero{text-align:center;margin-bottom:40px;animation:fadeUp .4s both;}
.hero-eyebrow{font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink4);margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:8px;}
.hero-line{width:28px;height:1px;background:var(--bdr2);}
.hero-title{font-family:var(--disp);font-size:clamp(22px,3.5vw,32px);font-weight:800;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px;}
.hero-sub{font-size:11px;color:var(--ink4);letter-spacing:.04em;margin-bottom:26px;font-weight:500;}
.search-form{display:flex;max-width:460px;margin:0 auto;border:1.5px solid var(--bdr3);background:var(--bg2);}
.search-at{display:flex;align-items:center;padding:0 14px;background:var(--ink);color:rgba(255,255,255,.55);font-size:14px;font-weight:700;border-right:none;flex-shrink:0;}
.search-input{flex:1;padding:13px 16px;font-family:var(--mono);font-size:13px;font-weight:500;border:none;background:transparent;color:var(--ink);outline:none;letter-spacing:.02em;min-width:0;}
.search-input::placeholder{color:var(--ink4);}
.search-btn{padding:13px 22px;background:var(--ink);color:#fff;border:none;border-left:1px solid rgba(0,0,0,.12);font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .13s;white-space:nowrap;flex-shrink:0;}
.search-btn:hover{background:#1e2130;}

/* ERROR */
.error-box{border:1px solid rgba(185,28,28,.28);background:rgba(185,28,28,.05);padding:11px 16px;margin-bottom:20px;font-size:11px;color:var(--red);letter-spacing:.03em;animation:fadeUp .3s both;}

/* PENDING */
.pending-box{border:1.5px solid var(--bdr2);background:var(--bg2);padding:20px;margin-bottom:20px;display:flex;align-items:center;gap:16px;animation:fadeUp .3s both;}
.pending-spinner{width:18px;height:18px;border:2px solid var(--ink5);border-top-color:var(--ink);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0;}
.pending-text{font-size:12px;font-weight:600;color:var(--ink);letter-spacing:.01em;}
.pending-sub{font-size:10px;color:var(--ink4);margin-top:4px;letter-spacing:.03em;}

/* SECTION HEADER (aptum pattern) */
.sec-hd{padding:9px 18px;border-bottom:1px solid var(--bdr2);display:flex;align-items:center;gap:10px;background:var(--bg1);}
.sec-num{font-size:8px;color:var(--ink4);letter-spacing:.1em;font-weight:700;border:1px solid var(--bdr);padding:2px 6px;background:var(--bg3);}
.sec-pipe{color:var(--bdr2);}
.sec-title{font-size:10.5px;color:var(--ink);letter-spacing:.12em;text-transform:uppercase;font-weight:700;}
.sec-sub{font-size:10px;color:var(--ink4);flex:1;font-weight:500;}
.sec-status{font-size:8.5px;color:var(--ink4);margin-left:auto;letter-spacing:.08em;font-weight:600;white-space:nowrap;}
.sec-status.ok{color:var(--green);}

/* PANEL */
.panel{background:var(--bg2);border:1px solid var(--bdr2);margin-bottom:10px;animation:fadeUp .4s both;}

/* PROFILE */
.profile-banner{height:110px;overflow:hidden;background-size:cover;background-position:center;}
.profile-body{padding:0 22px 22px;display:flex;align-items:flex-start;gap:18px;margin-top:-40px;}
.profile-pfp{width:88px;height:88px;border-radius:50%;border:3px solid var(--bg2);object-fit:cover;flex-shrink:0;background:var(--bg3);}
.profile-info{flex:1;min-width:0;padding-top:48px;}
.profile-handle{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:2px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.profile-dn{font-weight:400;color:var(--ink3);font-size:12.5px;}
.profile-bio{font-size:11px;color:var(--ink3);line-height:1.65;margin:7px 0 11px;}
.profile-stats{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--bdr);width:fit-content;max-width:100%;}
.pstat{padding:7px 14px;border-right:1px solid var(--bdr);display:flex;flex-direction:column;gap:2px;}
.pstat:last-child{border-right:none;}
.pstat-val{font-size:13px;font-weight:700;color:var(--ink);line-height:1;}
.pstat-lbl{font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink4);font-weight:600;}
.profile-right{text-align:right;flex-shrink:0;padding-top:48px;padding-bottom:4px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.score-big{font-family:var(--disp);font-size:52px;font-weight:800;line-height:1;letter-spacing:-.02em;}
.score-grade-lbl{font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--ink4);text-transform:uppercase;}
.niche-tag{font-size:8px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:3px 10px;border:1px solid var(--bdr2);background:var(--bg3);color:var(--ink3);display:inline-block;margin-top:2px;}

/* STATS GRID (dimension scores) */
.dim-scores-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--bdr);border:1px solid var(--bdr);}
@media(max-width:600px){.dim-scores-grid{grid-template-columns:repeat(3,1fr);}}
.dim-score-cell{background:var(--bg2);padding:14px 16px;display:flex;flex-direction:column;gap:4px;transition:background .12s;}
.dim-score-cell:hover{background:var(--bg3);}
.dim-score-val{font-size:22px;font-weight:700;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;}
.dim-score-lbl{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink4);font-weight:600;}
.dim-score-bar{height:2px;background:var(--bdr);margin-top:4px;}
.dim-score-bar-fill{height:100%;}

/* DIM DETAIL ROWS */
.dim-rows{display:flex;flex-direction:column;}
.dim-row{border-bottom:1px solid var(--bdr);padding:13px 18px;transition:background .1s;}
.dim-row:last-child{border-bottom:none;}
.dim-row:hover{background:var(--bg3);}
.dim-row-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.dim-row-label{font-size:11px;font-weight:700;color:var(--ink);flex:1;letter-spacing:.01em;}
.dim-row-score{font-size:11.5px;font-weight:700;}
.dim-row-bar-wrap{height:2px;background:var(--bdr);margin-bottom:10px;}
.dim-row-bar-fill{height:100%;}
.dim-row-lists{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:480px){.dim-row-lists{grid-template-columns:1fr;}}
.dim-list-lbl{font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4);margin-bottom:5px;}
.dim-list{list-style:none;display:flex;flex-direction:column;gap:4px;}
.dim-list li{font-size:11px;color:var(--ink2);line-height:1.55;padding-left:14px;position:relative;}
.dim-list.good li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:700;font-size:10px;}
.dim-list.fix li::before{content:'→';position:absolute;left:0;color:var(--ink3);}

/* CALLOUT */
.callout{padding:13px 18px;display:flex;gap:12px;align-items:flex-start;border-left:2px solid var(--bdr3);}
.callout-pre{font-size:8px;color:var(--ink4);letter-spacing:.12em;white-space:nowrap;padding-top:2px;font-weight:700;}
.callout-text{font-size:11.5px;color:var(--ink2);line-height:1.7;font-weight:500;}
.callout.green{border-left-color:var(--green);background:var(--green-bg);}
.callout.red{border-left-color:var(--red);background:rgba(185,28,28,0.05);}

/* LOG ROWS */
.log-rows{display:flex;flex-direction:column;}
.log-row{display:grid;grid-template-columns:22px 1fr auto;align-items:flex-start;border-bottom:1px solid var(--bdr);padding:11px 18px;font-size:11px;gap:12px;transition:background .1s;}
.log-row:last-child{border-bottom:none;}
.log-row:hover{background:var(--bg3);}
.log-idx{font-size:8.5px;color:var(--ink4);font-weight:700;letter-spacing:.06em;padding-top:1px;}
.log-msg{color:var(--ink2);font-weight:500;line-height:1.55;}
.log-tag{font-size:8px;color:var(--ink4);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding-top:2px;font-weight:600;}

/* KPI GRID */
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bdr);border:1px solid var(--bdr);}
@media(max-width:480px){.kpi-grid{grid-template-columns:1fr;}}
.kpi-cell{background:var(--bg2);padding:12px 16px;}
.kpi-num{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink4);margin-bottom:3px;font-weight:700;}
.kpi-val{font-size:12px;color:var(--ink);line-height:1.5;font-weight:500;}

/* RISK GRID */
.risk-row{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--bdr);}
.risk-row:last-child{border-bottom:none;}
.risk-flag-dot{width:5px;height:5px;border-radius:50%;background:var(--red);flex-shrink:0;}
.risk-flag-text{font-size:11px;color:var(--ink2);font-weight:500;}
.risk-score-bar{display:flex;align-items:center;gap:10px;}
.risk-score-num{font-size:22px;font-weight:700;line-height:1;}
.risk-bar-track{flex:1;height:4px;background:var(--bdr);min-width:80px;}
.risk-bar-fill{height:100%;background:var(--red);}

/* TOP ACTIONS */
.actions-panel{background:var(--ink);color:#fff;}
.actions-panel .sec-hd{background:rgba(255,255,255,.06);border-bottom-color:rgba(255,255,255,.10);}
.actions-panel .sec-num{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.40);}
.actions-panel .sec-title{color:rgba(255,255,255,.82);}
.act-row{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.06);align-items:flex-start;}
.act-row:last-child{border-bottom:none;}
.act-num{font-size:8.5px;font-weight:700;color:rgba(255,255,255,.28);letter-spacing:.1em;padding-top:2px;}
.act-text{font-size:12px;color:rgba(255,255,255,.88);font-weight:500;line-height:1.55;}

/* RECENT */
.section-lbl{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink4);margin-bottom:10px;}
.recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1px;background:var(--bdr);border:1px solid var(--bdr);margin-bottom:32px;animation:fadeUp .35s both;}
.recent-card{background:var(--bg2);padding:12px 14px;text-decoration:none;display:block;transition:background .12s;}
.recent-card:hover{background:var(--bg3);}
.rc-handle{font-size:11px;font-weight:700;color:var(--ink);letter-spacing:.01em;margin-bottom:4px;}
.rc-meta{display:flex;align-items:center;gap:8px;}
.rc-grade{font-size:10px;font-weight:700;}
.rc-niche{font-size:8.5px;color:var(--ink4);letter-spacing:.04em;text-transform:uppercase;}
.rc-time{font-size:8.5px;color:var(--ink4);margin-left:auto;}

/* EVAL WRAP */
.eval-wrap{animation:fadeUp .4s both;}

/* FOOTER + SHARE ACTIONS */
.eval-footer{font-size:9.5px;color:var(--ink4);text-align:center;padding:12px 0 4px;letter-spacing:.04em;}
.share-row{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-top:auto;padding-top:14px;}
.share-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.dl-btn{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:9px 16px;border:none;cursor:pointer;transition:all .13s;white-space:nowrap;line-height:1;}
.dl-btn.primary{background:var(--ink);color:#fff;}
.dl-btn.primary:hover{background:#1e2130;}
.dl-btn.secondary{background:transparent;color:var(--ink);border:1.5px solid var(--bdr2);}
.dl-btn.secondary:hover{background:var(--bg3);border-color:var(--bdr3);}
.dl-btn.x-share{background:#000;color:#fff;}
.dl-btn.x-share:hover{background:#1a1a1a;}
.dl-btn:disabled{opacity:.35;cursor:default;}
.dl-status{font-size:9px;color:var(--ink4);letter-spacing:.04em;min-height:14px;}

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media(max-width:640px){
  /* Topbar: keep only first two items */
  .tb-item:nth-child(n+3){display:none;}
  #tb-clock{display:none;}
  /* Navbar: tighten spacing */
  .nav-end{padding:0 10px;gap:10px;}
  .brand{padding:0 14px;}
  .brand-name{font-size:13px;}
  /* Page */
  .page{padding:84px 12px 52px;}
  /* Search */
  .search-form{max-width:100%;}
  .search-btn{padding:13px 14px;}
  /* Profile */
  .profile-banner{height:84px;}
  .profile-body{flex-wrap:wrap;gap:0 14px;padding:0 14px 16px;margin-top:-30px;}
  .profile-pfp{width:72px;height:72px;}
  .profile-info{padding-top:28px;}
  .profile-right{
    width:100%;flex-direction:column;align-items:flex-start;
    padding-top:14px;padding-bottom:0;
    border-top:1px solid var(--bdr);gap:6px;
  }
  .score-big{font-size:38px;}
  .niche-tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .share-row{padding-top:4px;align-items:flex-start;margin-top:0;width:100%;}
  .share-btns{display:grid;grid-template-columns:1fr 1fr;gap:5px;width:100%;}
  .dl-btn{min-height:40px;padding:10px 8px;font-size:8px;text-align:center;}
  /* Pending pipeline: horizontal scroll */
  #pipe-stages-row{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;}
  #pipe-stages-row > *{flex-shrink:0;}
  /* Dim grid already handled */
  .vibe-2col{grid-template-columns:1fr !important;}
  /* Section headers */
  .sec-sub{display:none;}
  /* Log rows: hide tag column */
  .log-tag{display:none;}
  .log-row{grid-template-columns:22px 1fr;}
  /* Signal intelligence: wrap on mobile */
  .risk-bar-track{min-width:40px;}
}
@media(max-width:420px){
  .brand-pill{display:none;}
  .nav-a{font-size:8.5px;letter-spacing:.08em;}
  .hero-title{font-size:20px;}
  .score-big{font-size:32px;}
  .dl-btn{padding:10px 10px;font-size:8px;}
  /* dim grid: 2-col on very small screens */
  .dim-scores-grid{grid-template-columns:repeat(2,1fr) !important;}
}

/* Leaderboard responsive — hide extra columns on small screens */
.lb-row{display:grid;}
@media(max-width:720px){
  .lb-row{grid-template-columns:32px 32px 1fr 88px !important;}
  .lb-c-er,.lb-c-risk,.lb-c-reach{display:none !important;}
  .lb-formula{display:none;}
}
@media(max-width:420px){
  .lb-row{grid-template-columns:28px 28px 1fr 76px !important;}
}
</style>
</head>
<body>

<div class="topbar">
  <div class="tb-item"><span class="tb-live-dot"></span><span>EVALUATE</span><span class="tb-val">X ACCOUNTS</span></div>
  <div class="tb-item"><span>EVALS</span><span class="tb-val"><?= count($recent) ?></span></div>
  <span id="tb-clock"></span>
</div>

<div class="navbar">
  <a class="brand" href="/evaluate">
    <span class="brand-name">APTUM</span>
    <span class="brand-pill">EVAL</span>
  </a>
  <div class="nav-end">
    <a href="/evaluate" class="nav-a active">Evaluate</a>
    <a href="/leaderboard" class="nav-a">Leaderboard</a>
    <a href="/nsi" class="nav-a">NSI</a>
    <a href="https://x.com/aptum_" target="_blank" class="nav-a">@aptum_</a>
  </div>
</div>

<div class="page">

  <div class="hero">
    <div class="hero-eyebrow"><span class="hero-line"></span>AI-POWERED ANALYSIS<span class="hero-line"></span></div>
    <div class="hero-title">X Account Evaluator</div>
    <div class="hero-sub">Score any account across 5 dimensions. Get specific, actionable intelligence.</div>
    <form class="search-form" method="GET" action="/evaluate">
      <div class="search-at">@</div>
      <input class="search-input" type="text" name="u" placeholder="username" value="<?= htmlspecialchars($query) ?>" autocomplete="off" autocorrect="off" spellcheck="false">
      <button class="search-btn" type="submit">Evaluate →</button>
    </form>
  </div>

  <?php if ($pending): ?>
  <div id="eval-pipeline" style="background:var(--ink);border:1px solid rgba(255,255,255,.08);margin-bottom:20px;animation:fadeUp .35s both;overflow:hidden;">
    <!-- Header -->
    <div style="padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:12px;">
      <div style="width:7px;height:7px;border-radius:50%;background:#34D399;flex-shrink:0;animation:blink 1.2s infinite;"></div>
      <div style="font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.35);font-weight:700;">EVALUATING</div>
      <div style="font-size:13px;font-weight:700;color:#fff;letter-spacing:.02em;">@<?= htmlspecialchars($query) ?></div>
      <div id="pipe-timer" style="margin-left:auto;font-size:9px;color:rgba(255,255,255,.22);letter-spacing:.1em;font-variant-numeric:tabular-nums;">00:00</div>
    </div>

    <!-- Pipeline stages -->
    <div id="pipe-stages-row" style="padding:28px 24px 22px;display:flex;align-items:flex-start;gap:0;position:relative;">
      <?php $stages = [
        ['id'=>'s1','icon'=>'⬡','label'=>'FETCH','sub'=>'Profile · Tweets · Bio'],
        ['id'=>'s2','icon'=>'⬡','label'=>'ANALYZE','sub'=>'5-axis AI evaluation'],
        ['id'=>'s3','icon'=>'⬡','label'=>'SCORE','sub'=>'Composite ranking'],
        ['id'=>'s4','icon'=>'⬡','label'=>'COMPILE','sub'=>'Report generation'],
      ]; ?>
      <?php foreach ($stages as $si => $stage): ?>
        <div style="flex:1;display:flex;flex-direction:column;align-items:center;position:relative;z-index:2;">
          <!-- Node -->
          <div id="node-<?= $stage['id'] ?>" style="width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .4s;position:relative;">
            <div class="stage-pulse" id="pulse-<?= $stage['id'] ?>" style="position:absolute;inset:-6px;border-radius:50%;border:1.5px solid transparent;"></div>
            <span id="icon-<?= $stage['id'] ?>" style="font-size:11px;color:rgba(255,255,255,.2);font-weight:700;letter-spacing:0;"><?= $si+1 ?></span>
          </div>
          <!-- Label -->
          <div style="margin-top:10px;text-align:center;">
            <div id="lbl-<?= $stage['id'] ?>" style="font-size:8.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.25);transition:color .4s;"><?= $stage['label'] ?></div>
            <div style="font-size:8px;color:rgba(255,255,255,.18);letter-spacing:.04em;margin-top:3px;"><?= $stage['sub'] ?></div>
          </div>
        </div>
        <?php if ($si < count($stages)-1): ?>
        <!-- Connector -->
        <div style="flex:1;margin-top:19px;height:2px;background:rgba(255,255,255,.06);position:relative;z-index:1;overflow:hidden;">
          <div id="conn-<?= $si ?>" style="height:100%;width:0%;background:linear-gradient(90deg,#34D399,#00C8FF);transition:width .6s ease;box-shadow:0 0 8px rgba(52,211,153,.5);"></div>
        </div>
        <?php endif; ?>
      <?php endforeach; ?>
    </div>

    <!-- Live log terminal -->
    <div style="margin:0 20px 20px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06);padding:12px 14px;font-family:var(--mono);">
      <div style="font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.2);margin-bottom:8px;font-weight:700;">LIVE LOG</div>
      <div id="live-log" style="display:flex;flex-direction:column;gap:4px;min-height:52px;"></div>
    </div>

    <!-- Progress bar -->
    <div style="height:2px;background:rgba(255,255,255,.04);">
      <div id="pipe-progress" style="height:100%;width:0%;background:linear-gradient(90deg,#34D399,#00C8FF,#A78BFA);transition:width .5s ease;"></div>
    </div>
  </div>

  <script>
  (function(){
    var started = Date.now();
    var stageIdx = 0;
    var logEl = document.getElementById('live-log');
    var progEl = document.getElementById('pipe-progress');
    var timerEl = document.getElementById('pipe-timer');

    var stages = ['s1','s2','s3','s4'];
    var stageColors = ['#34D399','#00C8FF','#A78BFA','#FBBC04'];
    var stagePct = [18, 45, 72, 92];

    var logs = [
      ['s1', '→ Connecting to X profile API'],
      ['s1', '→ Fetching @<?= addslashes($query) ?> bio & metadata'],
      ['s1', '→ Pulling recent tweets (last 30 days)'],
      ['s1', '→ Extracting engagement signals'],
      ['s2', '→ Initializing 5-axis evaluation model'],
      ['s2', '→ Scoring Content Quality dimension'],
      ['s2', '→ Scoring Engagement Rate dimension'],
      ['s2', '→ Scoring Niche Authority dimension'],
      ['s2', '→ Scoring Growth Velocity dimension'],
      ['s2', '→ Scoring Audience Quality dimension'],
      ['s3', '→ Computing composite aptum score'],
      ['s3', '→ Applying algo risk analysis'],
      ['s3', '→ Calculating follower reach weight'],
      ['s4', '→ Generating strategic recommendations'],
      ['s4', '→ Compiling growth strategy report'],
      ['s4', '→ Finalizing evaluation card'],
    ];

    var logIdx = 0;
    var stageMap = {'s1':0,'s2':1,'s3':2,'s4':3};

    function activateStage(id) {
      var col = stageColors[stageMap[id]];
      var node = document.getElementById('node-'+id);
      var pulse = document.getElementById('pulse-'+id);
      var lbl = document.getElementById('lbl-'+id);
      var icon = document.getElementById('icon-'+id);
      if (node) { node.style.borderColor = col; node.style.background = 'rgba(52,211,153,.08)'; node.style.boxShadow = '0 0 16px '+col+'44'; }
      if (pulse) { pulse.style.borderColor = col; pulse.style.animation = 'stagePulse 1.2s ease-out infinite'; }
      if (lbl) lbl.style.color = col;
      if (icon) { icon.style.color = col; icon.style.fontWeight = '700'; }
      // fill connector before this stage
      var ci = stageMap[id] - 1;
      if (ci >= 0) {
        var conn = document.getElementById('conn-'+ci);
        if (conn) conn.style.width = '100%';
      }
      if (progEl) progEl.style.width = stagePct[stageMap[id]] + '%';
    }

    function addLog(msg, stageId) {
      var col = stageColors[stageMap[stageId] || 0];
      var row = document.createElement('div');
      row.style.cssText = 'font-size:10px;color:rgba(255,255,255,.0);letter-spacing:.02em;display:flex;gap:8px;align-items:baseline;transition:color .3s;';
      row.innerHTML = '<span style="color:'+col+';font-size:7.5px;font-weight:700;flex-shrink:0;letter-spacing:.1em;">'+stageId.toUpperCase()+'</span><span>'+msg+'</span>';
      logEl.appendChild(row);
      // keep max 4 lines
      while (logEl.children.length > 4) logEl.removeChild(logEl.firstChild);
      setTimeout(function(){row.style.color='rgba(255,255,255,.55)';}, 30);
      logEl.scrollTop = logEl.scrollHeight;
    }

    function addCursor() {
      var cur = document.createElement('div');
      cur.id = 'log-cursor';
      cur.style.cssText = 'font-size:10px;color:rgba(255,255,255,.4);animation:blink 1s infinite;';
      cur.textContent = '▌';
      logEl.appendChild(cur);
    }

    // Timer
    setInterval(function(){
      var s = Math.floor((Date.now()-started)/1000);
      var mm = String(Math.floor(s/60)).padStart(2,'0');
      var ss = String(s%60).padStart(2,'0');
      if(timerEl) timerEl.textContent = mm+':'+ss;
    }, 1000);

    // Stage + log progression
    activateStage('s1');
    addCursor();

    var logTimer = setInterval(function(){
      if (logIdx >= logs.length) { clearInterval(logTimer); return; }
      var entry = logs[logIdx];
      var cur = document.getElementById('log-cursor');
      if (cur) cur.remove();
      addLog(entry[1], entry[0]);
      addCursor();
      // advance stage
      var newStage = stageMap[entry[0]];
      if (newStage > stageIdx) { stageIdx = newStage; activateStage(entry[0]); }
      logIdx++;
    }, <?= $triggered ? 3200 : 2200 ?>);

    // Silent AJAX poll — no page flicker, redirect once when done
    (function poll(){
      setTimeout(function(){
        fetch('/evaluate?check=1&u=<?= urlencode($query) ?>')
          .then(function(r){return r.json();})
          .then(function(d){ d.done ? (location.href='/evaluate?u=<?= urlencode($query) ?>') : poll(); })
          .catch(poll);
      }, 3000);
    })();
  })();
  </script>
  <style>
  @keyframes stagePulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.5);opacity:0}}
  </style>
  <?php elseif ($error): ?>
  <div class="error-box"><?= htmlspecialchars($error) ?></div>
  <?php endif; ?>

  <?php if ($evalData): $ev = $evalData['evaluation']; $pr = $evalData['profile'];
    $overall  = (float)($ev['overall'] ?? 0);
    $sc       = scoreColor($overall);
    $dims5    = array_slice(array_values($ev['dimensions'] ?? []), 0, 5);
    $report   = $ev['report'] ?? [];
    $bannerUrl = $pr['bannerUrl'] ?? '';
  ?>
  <?php if ($reevalPending): ?>
  <div style="background:var(--ink);border:1px solid rgba(255,255,255,.08);margin-bottom:14px;padding:12px 20px;display:flex;align-items:center;gap:12px;animation:fadeUp .3s both;">
    <div style="width:7px;height:7px;border-radius:50%;background:#34D399;flex-shrink:0;animation:blink 1.2s infinite;"></div>
    <div>
      <div style="font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.35);font-weight:700;">RE-EVALUATING</div>
      <div style="font-size:12px;font-weight:700;color:#fff;margin-top:3px;">@<?= htmlspecialchars($query) ?> — results will update automatically</div>
    </div>
  </div>
  <script>
  (function pollReeval(){
    setTimeout(function(){
      fetch('/evaluate?check=reeval&u=<?= urlencode($query) ?>')
        .then(function(r){return r.json();})
        .then(function(d){ d.done ? location.href='/evaluate?u=<?= urlencode($query) ?>' : pollReeval(); })
        .catch(pollReeval);
    }, 4000);
  })();
  </script>
  <?php endif; ?>
  <div class="eval-wrap">

    <!-- ── PROFILE ── -->
    <div class="panel" style="margin-bottom:10px;">
      <div class="profile-banner" style="<?= $bannerUrl ? 'background:url(' . htmlspecialchars($bannerUrl) . ') center/cover no-repeat;' : 'background:linear-gradient(135deg,var(--bg1) 0%,var(--bg3) 100%);border-bottom:1px solid var(--bdr2);' ?>"></div>
      <div class="profile-body">
        <img class="profile-pfp" src="<?= htmlspecialchars($pr['pfpUrl'] ?? 'https://unavatar.io/x/' . urlencode($evalData['username'])) ?>" alt="" onerror="this.src='https://unavatar.io/x/<?= urlencode($evalData['username']) ?>';this.onerror=function(){this.style.opacity='.2'}">
        <div class="profile-info">
          <div class="profile-handle">
            <a href="https://x.com/<?= urlencode($evalData['username']) ?>" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--bdr2);padding-bottom:1px;transition:border-color .12s;" onmouseover="this.style.borderColor='var(--ink)'" onmouseout="this.style.borderColor='var(--bdr2)'">@<?= htmlspecialchars($evalData['username']) ?></a>
            <?php if ($pr['displayName'] ?? ''): ?><span class="profile-dn"><?= htmlspecialchars($pr['displayName']) ?></span><?php endif; ?>
          </div>
          <?php if ($pr['bio'] ?? ''): ?><div class="profile-bio"><?= htmlspecialchars(substr($pr['bio'], 0, 180)) ?></div><?php endif; ?>
          <div class="profile-stats">
            <?php if ($pr['followers'] ?? ''): ?><div class="pstat"><span class="pstat-val"><?= htmlspecialchars($pr['followers']) ?></span><span class="pstat-lbl">Followers</span></div><?php endif; ?>
            <?php if ($pr['following'] ?? ''): ?><div class="pstat"><span class="pstat-val"><?= htmlspecialchars($pr['following']) ?></span><span class="pstat-lbl">Following</span></div><?php endif; ?>
            <?php if ($pr['tweetCount'] ?? ''): ?><div class="pstat"><span class="pstat-val"><?= htmlspecialchars($pr['tweetCount']) ?></span><span class="pstat-lbl">Posts</span></div><?php endif; ?>
          </div>
        </div>
        <div class="profile-right">
          <div class="score-big" style="color:<?= $sc ?>"><?= number_format($overall, 1) ?></div>
          <div class="score-grade-lbl"><?= htmlspecialchars($ev['grade'] ?? '') ?> · Grade</div>
          <?php if ($ev['niche'] ?? ''): ?><div class="niche-tag"><?= htmlspecialchars($ev['niche']) ?></div><?php endif; ?>
          <?php if ($report['account_type'] ?? ''): ?><div class="niche-tag" style="margin-top:4px;"><?= htmlspecialchars($report['account_type']) ?></div><?php endif; ?>
          <?php
            $_topBadge = $report['niche_er_rank'] ?? $report['er_percentile'] ?? '';
            // Extract leading "Top X%" for highlighting
            preg_match('/top\s+(\d+%)/i', $_topBadge, $_topM);
            $_topPct = $_topM[1] ?? '';
            $_topLabel = $_topPct ? preg_replace('/top\s+\d+%\s*/i', '', $_topBadge) : '';
          ?>
          <?php if ($_topBadge): ?>
          <div style="margin-top:8px;display:inline-flex;align-items:baseline;gap:5px;padding:5px 10px;background:rgba(11,122,66,.08);border:1px solid rgba(11,122,66,.2);border-radius:2px;">
            <?php if ($_topPct): ?>
            <span style="font-family:var(--disp);font-size:14px;font-weight:800;color:var(--green);line-height:1;letter-spacing:-.01em;">Top <?= htmlspecialchars($_topPct) ?></span>
            <?php endif; ?>
            <span style="font-size:8.5px;color:var(--green);opacity:.8;letter-spacing:.04em;"><?= htmlspecialchars($_topLabel ?: $_topBadge) ?></span>
          </div>
          <?php endif; ?>
          <div class="share-row">
            <div class="share-btns">
              <button class="dl-btn secondary" id="copy-btn" onclick="copyCardImage()">⬡ Copy Image</button>
              <button class="dl-btn x-share" id="share-btn" onclick="shareOnX()">𝕏 Share</button>
              <button class="dl-btn primary" id="dl-btn" onclick="downloadCard()">↓ Download</button>
              <a href="/evaluate?u=<?= urlencode($evalData['username'] ?? $query) ?>&force=1" class="dl-btn secondary" id="reeval-btn" style="text-decoration:none;text-align:center;">↺ Re-evaluate</a>
            </div>
            <div class="dl-status" id="dl-status" style="text-align:right;"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- ── SUMMARY ── -->
    <?php if ($ev['summary'] ?? ''): ?>
    <?php $vibe = $ev['vibe'] ?? null; ?>
    <div class="panel" style="margin-bottom:10px;">
      <div class="sec-hd">
        <span class="sec-num">01</span><span class="sec-pipe">|</span>
        <span class="sec-title">Assessment</span>
        <span class="sec-sub">AI evaluation summary</span>
        <span class="sec-status ok"><?= relTime($evalData['scannedAt'] ?? '') ?></span>
      </div>

      <?php if ($vibe): ?>
      <?php
        $vibeEnergy = strtolower($vibe['energy'] ?? 'medium');
        $energyColor = $vibeEnergy === 'high' ? 'var(--green)' : ($vibeEnergy === 'low' ? 'var(--ink4)' : '#00C8FF');
        $energyBg    = $vibeEnergy === 'high' ? 'rgba(11,122,66,.1)' : ($vibeEnergy === 'low' ? 'rgba(0,0,0,.06)' : 'rgba(0,200,255,.08)');
      ?>
      <!-- VIBE BLOCK -->
      <div style="padding:14px 18px 12px;border-bottom:1px solid var(--bdr);">
        <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap;">
          <div>
            <div style="font-size:7px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4);font-weight:700;margin-bottom:5px;">Content Vibe</div>
            <div style="font-family:var(--disp);font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.01em;line-height:1.1;"><?= htmlspecialchars($vibe['archetype'] ?? '') ?></div>
          </div>
          <div style="display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding-top:18px;">
            <?php if ($vibe['energy'] ?? ''): ?>
            <span style="font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;background:<?= $energyBg ?>;color:<?= $energyColor ?>;border-radius:2px;"><?= htmlspecialchars(strtoupper($vibe['energy'])) ?> ENERGY</span>
            <?php endif; ?>
            <?php if ($vibe['tone'] ?? ''): ?>
            <span style="font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;background:var(--bg3);color:var(--ink3);border:1px solid var(--bdr);border-radius:2px;"><?= htmlspecialchars($vibe['tone']) ?></span>
            <?php endif; ?>
          </div>
        </div>
        <?php if (!empty($vibe['personality_tags'])): ?>
        <div style="display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px;">
          <?php foreach ($vibe['personality_tags'] as $tag): ?>
          <span style="font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.04em;padding:3px 10px;background:var(--bg1);border:1px solid var(--bdr2);color:var(--ink3);"><?= htmlspecialchars($tag) ?></span>
          <?php endforeach; ?>
        </div>
        <?php endif; ?>
        <div class="vibe-2col" style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
          <?php if ($vibe['content_style'] ?? ''): ?>
          <div>
            <div style="font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink4);font-weight:700;margin-bottom:3px;">Posting Style</div>
            <div style="font-size:10.5px;color:var(--ink2);line-height:1.45;letter-spacing:.01em;"><?= htmlspecialchars($vibe['content_style']) ?></div>
          </div>
          <?php endif; ?>
          <?php if ($vibe['audience_fit'] ?? ''): ?>
          <div>
            <div style="font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink4);font-weight:700;margin-bottom:3px;">Audience Fit</div>
            <div style="font-size:10.5px;color:var(--ink2);line-height:1.45;letter-spacing:.01em;"><?= htmlspecialchars($vibe['audience_fit']) ?></div>
          </div>
          <?php endif; ?>
        </div>
      </div>
      <?php endif; ?>

      <div class="callout" style="border-left-color:var(--bdr3);">
        <span class="callout-pre">SUMMARY</span>
        <span class="callout-text"><?= htmlspecialchars($ev['summary']) ?></span>
      </div>
      <?php if ($report['verdict'] ?? ''): ?>
      <div class="callout green">
        <span class="callout-pre">VERDICT</span>
        <span class="callout-text"><?= htmlspecialchars($report['verdict']) ?></span>
      </div>
      <?php endif; ?>
    </div>
    <?php endif; ?>

    <!-- ── DIMENSION SCORES GRID ── -->
    <div class="panel" style="margin-bottom:10px;">
      <div class="sec-hd">
        <span class="sec-num">02</span><span class="sec-pipe">|</span>
        <span class="sec-title">Performance Dimensions</span>
        <span class="sec-sub">5-axis evaluation</span>
        <span class="sec-status"><?= number_format($overall, 1) ?> / 10</span>
      </div>
      <div class="dim-scores-grid">
        <?php foreach ($dims5 as $dim):
          $ds = (float)($dim['score'] ?? 0);
          $dsc = scoreColor($ds);
          $dpct = barPct($ds);
        ?>
        <div class="dim-score-cell">
          <div class="dim-score-val" style="color:<?= $dsc ?>"><?= number_format($ds, 1) ?></div>
          <div class="dim-score-lbl"><?= htmlspecialchars($dim['label'] ?? '') ?></div>
          <div class="dim-score-bar"><div class="dim-score-bar-fill" style="width:<?= $dpct ?>%;background:<?= $dsc ?>"></div></div>
        </div>
        <?php endforeach; ?>
      </div>
      <div class="dim-rows">
        <?php foreach ($dims5 as $dim):
          $ds = (float)($dim['score'] ?? 0);
          $dsc = scoreColor($ds);
          $dpct = barPct($ds);
        ?>
        <div class="dim-row">
          <div class="dim-row-head">
            <span class="dim-row-label"><?= htmlspecialchars($dim['label'] ?? '') ?></span>
            <span class="dim-row-score" style="color:<?= $dsc ?>"><?= number_format($ds, 1) ?>/10</span>
          </div>
          <div class="dim-row-bar-wrap"><div class="dim-row-bar-fill" style="width:<?= $dpct ?>%;background:<?= $dsc ?>"></div></div>
          <?php if (!empty($dim['good']) || !empty($dim['fix'])): ?>
          <div class="dim-row-lists">
            <?php if (!empty($dim['good'])): ?>
            <div>
              <div class="dim-list-lbl">Strengths</div>
              <ul class="dim-list good"><?php foreach ($dim['good'] as $g): ?><li><?= htmlspecialchars($g) ?></li><?php endforeach; ?></ul>
            </div>
            <?php endif; ?>
            <?php if (!empty($dim['fix'])): ?>
            <div>
              <div class="dim-list-lbl">Opportunities</div>
              <ul class="dim-list fix"><?php foreach ($dim['fix'] as $f): ?><li><?= htmlspecialchars($f) ?></li><?php endforeach; ?></ul>
            </div>
            <?php endif; ?>
          </div>
          <?php endif; ?>
        </div>
        <?php endforeach; ?>
      </div>
    </div>

    <!-- ── TOP ACTIONS ── -->
    <?php if (!empty($ev['top_actions'])): ?>
    <div class="panel actions-panel" style="margin-bottom:10px;">
      <div class="sec-hd">
        <span class="sec-num">03</span><span class="sec-pipe">|</span>
        <span class="sec-title">Top Actions</span>
        <span class="sec-sub">Highest-ROI moves</span>
      </div>
      <?php foreach ($ev['top_actions'] as $i => $action): ?>
      <div class="act-row">
        <span class="act-num">0<?= $i + 1 ?></span>
        <span class="act-text"><?= htmlspecialchars($action) ?></span>
      </div>
      <?php endforeach; ?>
    </div>
    <?php endif; ?>

    <!-- ── REPORT: ALGO RISK + ER ── -->
    <?php if ($report): ?>
    <div class="panel" style="margin-bottom:10px;">
      <div class="sec-hd">
        <span class="sec-num">04</span><span class="sec-pipe">|</span>
        <span class="sec-title">Signal Intelligence</span>
        <span class="sec-sub">Algo risk · ER · Velocity</span>
        <?php $risk = (int)($report['algo_risk_score'] ?? 0); ?>
        <span class="sec-status<?= $risk >= 60 ? '' : ' ok' ?>"><?= $risk >= 60 ? 'HIGH RISK' : 'LOW RISK' ?></span>
      </div>

      <?php if (isset($report['algo_risk_score'])): ?>
      <div style="padding:14px 18px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:16px;">
        <div>
          <div style="font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4);margin-bottom:2px;font-weight:700;">ALGO RISK SCORE</div>
          <div class="risk-score-bar"><span class="risk-score-num" style="color:<?= $risk >= 60 ? 'var(--red)' : 'var(--green)' ?>"><?= $risk ?></span></div>
        </div>
        <div class="risk-bar-track" style="flex:1;height:4px;background:var(--bdr);"><div style="width:<?= $risk ?>%;height:100%;background:<?= $risk >= 60 ? 'var(--red)' : 'var(--green)' ?>;transition:width .3s;"></div></div>
        <div style="display:flex;flex-direction:column;align-items:flex-end;gap:5px;">
          <?php if ($report['weighted_er_pct'] ?? ''): ?>
          <div style="font-size:13px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;font-family:var(--mono);">ER <?= htmlspecialchars($report['weighted_er_pct']) ?></div>
          <?php endif; ?>
          <?php if ($report['niche_er_rank'] ?? ''): ?>
          <?php preg_match('/top\s+(\d+%)/i', $report['niche_er_rank'], $_nm); ?>
          <div style="display:inline-flex;align-items:baseline;gap:4px;padding:3px 8px;background:rgba(11,122,66,.08);border:1px solid rgba(11,122,66,.18);border-radius:2px;">
            <?php if ($_nm[1] ?? ''): ?><span style="font-family:var(--disp);font-size:11px;font-weight:800;color:var(--green);">Top <?= htmlspecialchars($_nm[1]) ?></span><?php endif; ?>
            <span style="font-size:7.5px;color:var(--green);opacity:.75;letter-spacing:.03em;"><?= htmlspecialchars(preg_replace('/top\s+\d+%\s*/i', '', $report['niche_er_rank'])) ?></span>
          </div>
          <?php endif; ?>
          <?php if (($report['er_percentile'] ?? '') && ($report['niche_er_rank'] ?? '') !== ($report['er_percentile'] ?? '')): ?>
          <div style="font-size:8px;color:var(--ink4);letter-spacing:.03em;"><?= htmlspecialchars($report['er_percentile']) ?></div>
          <?php endif; ?>
        </div>
      </div>
      <?php endif; ?>

      <?php if ($report['velocity_insight'] ?? ''): ?>
      <div class="callout" style="border-left-color:var(--bdr3);border-bottom:1px solid var(--bdr);">
        <span class="callout-pre">VELOCITY</span>
        <span class="callout-text"><?= htmlspecialchars($report['velocity_insight']) ?></span>
      </div>
      <?php endif; ?>

      <?php if (!empty($report['algo_risk_flags'])): ?>
      <div style="border-bottom:1px solid var(--bdr);">
        <div style="padding:8px 18px;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4);font-weight:700;background:var(--bg1);">RISK FLAGS</div>
        <?php foreach ($report['algo_risk_flags'] as $flag): ?>
        <div class="risk-row"><span class="risk-flag-dot"></span><span class="risk-flag-text"><?= htmlspecialchars($flag) ?></span></div>
        <?php endforeach; ?>
      </div>
      <?php endif; ?>

    </div>

    <!-- ── QUICK WINS + STRATEGY ── -->
    <?php if (!empty($report['quick_wins']) || !empty($report['strategy_fixes']) || !empty($report['long_term'])): ?>
    <div class="panel" style="margin-bottom:10px;">
      <div class="sec-hd">
        <span class="sec-num">05</span><span class="sec-pipe">|</span>
        <span class="sec-title">Growth Strategy</span>
        <span class="sec-sub">Quick wins · Medium-term · Long-term</span>
      </div>

      <?php if (!empty($report['quick_wins'])): ?>
      <div style="border-bottom:1px solid var(--bdr);">
        <div style="padding:8px 18px;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4);font-weight:700;background:var(--bg1);">QUICK WINS · 1–7 DAYS</div>
        <div class="log-rows">
          <?php foreach ($report['quick_wins'] as $i => $item): ?>
          <div class="log-row">
            <span class="log-idx">0<?= $i+1 ?></span>
            <span class="log-msg"><?= htmlspecialchars($item) ?></span>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
      <?php endif; ?>

      <?php if (!empty($report['strategy_fixes'])): ?>
      <div style="border-bottom:1px solid var(--bdr);">
        <div style="padding:8px 18px;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4);font-weight:700;background:var(--bg1);">STRATEGY · 14–30 DAYS</div>
        <div class="log-rows">
          <?php foreach ($report['strategy_fixes'] as $i => $item): ?>
          <div class="log-row">
            <span class="log-idx">0<?= $i+1 ?></span>
            <span class="log-msg"><?= htmlspecialchars($item) ?></span>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
      <?php endif; ?>

      <?php if (!empty($report['long_term'])): ?>
      <div>
        <div style="padding:8px 18px;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4);font-weight:700;background:var(--bg1);">COMPOUNDING HABITS · 30–90 DAYS</div>
        <div class="log-rows">
          <?php foreach ($report['long_term'] as $i => $item): ?>
          <div class="log-row">
            <span class="log-idx">0<?= $i+1 ?></span>
            <span class="log-msg"><?= htmlspecialchars($item) ?></span>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
      <?php endif; ?>

    </div>
    <?php endif; ?>

    <!-- ── KPIs ── -->
    <?php if (!empty($report['kpis'])): ?>
    <div class="panel" style="margin-bottom:10px;">
      <div class="sec-hd">
        <span class="sec-num">06</span><span class="sec-pipe">|</span>
        <span class="sec-title">Weekly KPIs</span>
        <span class="sec-sub">3 metrics to track</span>
      </div>
      <div class="kpi-grid">
        <?php foreach (array_slice($report['kpis'], 0, 3) as $i => $kpi): ?>
        <div class="kpi-cell">
          <div class="kpi-num">KPI 0<?= $i+1 ?></div>
          <div class="kpi-val"><?= htmlspecialchars($kpi) ?></div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
    <?php endif; ?>

    <?php endif; // end $report ?>

  </div><!-- /eval-wrap -->

  <?php elseif (!empty($recent)): ?>
  <div style="margin-bottom:32px;animation:fadeUp .35s both;background:var(--bg2);border:1px solid var(--bdr2);overflow:hidden;">
    <!-- Header -->
    <div style="padding:11px 18px;border-bottom:1px solid var(--bdr2);background:var(--bg1);display:flex;align-items:center;gap:10px;">
      <span style="font-family:var(--disp);font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink4);">LB</span>
      <span style="width:1px;height:12px;background:var(--bdr2);"></span>
      <span style="font-family:var(--disp);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);">Rankings</span>
      <span style="font-size:9px;color:var(--ink4);letter-spacing:.03em;">All evaluated accounts · sorted by score</span>
      <span style="margin-left:auto;font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;background:rgba(11,122,66,.1);color:var(--green);"><?= count($recent) ?> accounts</span>
    </div>
    <!-- Score formula legend -->
    <div class="lb-formula" style="padding:7px 18px;border-bottom:1px solid var(--bdr);background:var(--bg3);display:flex;align-items:center;gap:14px;flex-wrap:wrap;">
      <div style="font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink4);font-weight:700;">Aptum Score =</div>
      <?php foreach ([['AI Score','50%','var(--green)'],['Engagement','20%','#00C8FF'],['Algo Safety','15%','#A78BFA'],['Reach','15%','#FB923C']] as [$lbl,$pct,$col]): ?>
      <div style="display:flex;align-items:center;gap:5px;">
        <div style="width:6px;height:6px;background:<?= $col ?>;border-radius:50%;flex-shrink:0;opacity:.9;"></div>
        <div style="font-size:7.5px;color:var(--ink4);letter-spacing:.05em;"><?= $lbl ?> <span style="color:var(--ink2);font-weight:700;"><?= $pct ?></span></div>
      </div>
      <?php endforeach; ?>
    </div>
    <!-- Column headers -->
    <div class="lb-row" style="grid-template-columns:44px 44px 1fr 118px 70px 66px 62px;align-items:center;padding:5px 18px;border-bottom:1.5px solid var(--bdr2);background:var(--bg1);">
      <div style="font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink4);font-weight:700;">#</div>
      <div></div>
      <div style="font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink4);font-weight:700;">Account / Dimensions</div>
      <div style="font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink4);font-weight:700;text-align:center;position:relative;">Aptum Score <span class="lb-info-icon" data-tip="apt-tip" style="display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid var(--ink4);font-size:7px;line-height:11px;text-align:center;cursor:pointer;font-weight:700;vertical-align:middle;" title="">i</span>
        <div id="apt-tip" class="lb-tooltip" style="display:none;position:absolute;right:0;top:18px;width:230px;background:var(--bg2);border:1px solid var(--bdr2);border-radius:6px;padding:8px 10px;font-size:10px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink2);z-index:999;line-height:1.5;white-space:normal;text-align:left;box-shadow:0 4px 20px rgba(0,0,0,.12);">
          <strong style="color:var(--ink);">Aptum Score</strong> — composite rank<br>
          50% AI score · 20% engagement rate · 15% algo safety · 15% reach. Used for leaderboard ranking.<br><br>
          <strong style="color:var(--ink);">AI Score</strong> — shown below in grey<br>
          Raw score from the AI evaluation (same number shown on the full report).<br><br>
          <span style="display:inline-block;padding:1px 6px;background:rgba(11,122,66,.1);color:var(--green);font-weight:700;border-radius:2px;">≥ 7</span> strong &nbsp;
          <span style="display:inline-block;padding:1px 6px;background:rgba(0,200,255,.08);color:#00C8FF;font-weight:700;border-radius:2px;">5–7</span> average &nbsp;
          <span style="display:inline-block;padding:1px 6px;background:rgba(185,28,28,.1);color:var(--red);font-weight:700;border-radius:2px;">&lt; 5</span> low
        </div>
      </div>
      <div class="lb-c-er" style="font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink4);font-weight:700;text-align:right;position:relative;">ER <span class="lb-info-icon" data-tip="er-tip" style="display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid var(--ink4);font-size:7px;line-height:11px;text-align:center;cursor:pointer;font-weight:700;vertical-align:middle;" title="">i</span>
        <div id="er-tip" class="lb-tooltip" style="display:none;position:absolute;right:0;top:18px;width:200px;background:var(--bg2);border:1px solid var(--bdr2);border-radius:6px;padding:8px 10px;font-size:10px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink2);z-index:999;line-height:1.5;white-space:normal;text-align:left;box-shadow:0 4px 20px rgba(0,0,0,.12);">
          <strong style="color:var(--ink);">Engagement Rate</strong><br>
          (Likes + Comments + Retweets) ÷ Followers.<br><br>
          <span style="display:inline-block;padding:1px 6px;background:rgba(11,122,66,.1);color:var(--green);font-weight:700;border-radius:2px;">≥ 5%</span> excellent &nbsp;
          <span style="display:inline-block;padding:1px 6px;background:rgba(251,146,60,.1);color:#FB923C;font-weight:700;border-radius:2px;">1–5%</span> average &nbsp;
          <span style="display:inline-block;padding:1px 6px;background:rgba(185,28,28,.1);color:var(--red);font-weight:700;border-radius:2px;">&lt; 1%</span> low
        </div>
      </div>
      <div class="lb-c-risk" style="font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink4);font-weight:700;text-align:right;position:relative;">Risk <span class="lb-info-icon" data-tip="risk-tip" style="display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid var(--ink4);font-size:7px;line-height:11px;text-align:center;cursor:pointer;font-weight:700;vertical-align:middle;" title="">i</span>
        <div id="risk-tip" class="lb-tooltip" style="display:none;position:absolute;right:0;top:18px;width:210px;background:var(--bg2);border:1px solid var(--bdr2);border-radius:6px;padding:8px 10px;font-size:10px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink2);z-index:999;line-height:1.5;white-space:normal;text-align:left;box-shadow:0 4px 20px rgba(0,0,0,.12);">
          <strong style="color:var(--ink);">Algo Risk Score</strong><br>
          Likelihood of suppression by X's algorithm. Based on posting patterns, content flags, and engagement anomalies.<br><br>
          <span style="display:inline-block;padding:1px 6px;background:rgba(11,122,66,.1);color:var(--green);font-weight:700;border-radius:2px;">&lt; 35</span> low &nbsp;
          <span style="display:inline-block;padding:1px 6px;background:rgba(251,146,60,.1);color:#FB923C;font-weight:700;border-radius:2px;">35–60</span> moderate &nbsp;
          <span style="display:inline-block;padding:1px 6px;background:rgba(185,28,28,.1);color:var(--red);font-weight:700;border-radius:2px;">≥ 60</span> high
        </div>
      </div>
      <div class="lb-c-reach" style="font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink4);font-weight:700;text-align:right;position:relative;">Reach <span class="lb-info-icon" data-tip="reach-tip" style="display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid var(--ink4);font-size:7px;line-height:11px;text-align:center;cursor:pointer;font-weight:700;vertical-align:middle;" title="">i</span>
        <div id="reach-tip" class="lb-tooltip" style="display:none;position:absolute;right:0;top:18px;width:190px;background:var(--bg2);border:1px solid var(--bdr2);border-radius:6px;padding:8px 10px;font-size:10px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink2);z-index:999;line-height:1.5;white-space:normal;text-align:left;box-shadow:0 4px 20px rgba(0,0,0,.12);">
          <strong style="color:var(--ink);">Reach</strong><br>
          Follower count at time of evaluation, plus how recently the account was last scanned.
        </div>
      </div>
    </div>
    <?php foreach ($recent as $idx => $r):
      $rank = $idx + 1;
      $ov   = (float)($r['overall'] ?? 0);
      $apt  = (float)($r['aptumScore'] ?? $ov);
      $sc   = scoreColor($apt);
      $algoR = (int)($r['algoRisk'] ?? 50);
      $riskColor  = $algoR >= 60 ? 'var(--red)'    : ($algoR >= 35 ? '#FB923C'      : 'var(--green)');
      $riskBg     = $algoR >= 60 ? 'rgba(185,28,28,.08)' : ($algoR >= 35 ? 'rgba(251,146,60,.1)' : 'rgba(11,122,66,.08)');
      $rankStripe = match(true) {
        $rank === 1 => '#FFD700',
        $rank === 2 => '#C0C0C0',
        $rank === 3 => '#CD7F32',
        default     => 'transparent',
      };
      $rankColor = match(true) {
        $rank === 1 => '#B8860B',
        $rank === 2 => '#6B7280',
        $rank === 3 => '#92400E',
        default     => 'var(--ink4)',
      };
      $rankBg = match(true) {
        $rank === 1 => 'rgba(255,215,0,0.04)',
        $rank === 2 => 'rgba(192,192,192,0.025)',
        $rank === 3 => 'rgba(205,127,50,0.035)',
        default     => 'transparent',
      };
      $pfp = ($r['pfpUrl'] ?? '') ? htmlspecialchars($r['pfpUrl']) : 'https://unavatar.io/x/' . urlencode($r['username']);
      $aptColor = $apt >= 7 ? 'var(--green)' : ($apt >= 5 ? '#00C8FF' : 'var(--red)');
      $aptGlow  = $apt >= 8 ? ';text-shadow:0 0 18px rgba(11,122,66,.35)' : ($apt >= 7 ? ';text-shadow:0 0 12px rgba(11,122,66,.2)' : '');
      $aptPct   = (int)(($apt / 10) * 100);
      // ER color-coding
      $erRaw = (float)($r['erRaw'] ?? preg_replace('/[^0-9.]/', '', $r['er'] ?? '0'));
      $erColor = $erRaw >= 5 ? 'var(--green)' : ($erRaw >= 1 ? '#00C8FF' : ($erRaw > 0 ? 'var(--red)' : 'var(--ink4)'));
      $erBg    = $erRaw >= 5 ? 'rgba(11,122,66,.08)' : ($erRaw >= 1 ? 'rgba(0,200,255,.07)' : ($erRaw > 0 ? 'rgba(185,28,28,.07)' : 'transparent'));
    ?>
    <a href="/evaluate?u=<?= urlencode($r['username']) ?>" class="lb-row" style="grid-template-columns:44px 44px 1fr 118px 70px 66px 62px;align-items:center;padding:10px 0 10px 0;border-bottom:1px solid var(--bdr);text-decoration:none;background:<?= $rankBg ?>;transition:background .14s;position:relative;" onmouseover="this.style.background='var(--bg3)'" onmouseout="this.style.background='<?= $rankBg ?>'">
      <!-- Rank stripe -->
      <?php if ($rank <= 3): ?>
      <div style="position:absolute;left:0;top:0;bottom:0;width:3px;background:<?= $rankStripe ?>;opacity:.7;"></div>
      <?php endif; ?>
      <!-- Rank -->
      <div style="padding-left:14px;font-size:<?= $rank <= 3 ? '11px' : '10px' ?>;font-weight:700;color:<?= $rankColor ?>;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:.02em;"><?= $rank <= 3 ? ['🥇','🥈','🥉'][$rank-1] : $rank ?></div>
      <!-- PFP -->
      <div style="padding-left:2px;"><img src="<?= $pfp ?>" alt="" style="width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--bg3);display:block;border:<?= $rank===1 ? '2px solid #FFD700' : ($rank===2 ? '1.5px solid #C0C0C0' : ($rank===3 ? '1.5px solid #CD7F32' : '1px solid var(--bdr2)')) ?>;" onerror="this.src='https://unavatar.io/x/<?= urlencode($r['username']) ?>';this.onerror=function(){this.style.opacity='.2'}"></div>
      <!-- Account + dimension mini-bars -->
      <div style="min-width:0;padding-right:14px;">
        <div style="display:flex;align-items:baseline;gap:7px;margin-bottom:4px;">
          <div style="font-size:11.5px;font-weight:700;color:var(--ink);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">@<?= htmlspecialchars($r['username']) ?></div>
          <?php if ($r['niche']): ?><div style="font-size:7.5px;color:var(--ink4);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;"><?= htmlspecialchars($r['niche']) ?></div><?php endif; ?>
        </div>
        <?php if (!empty($r['dims'])): ?>
        <div style="display:flex;gap:3px;align-items:flex-end;height:14px;">
          <?php foreach ($r['dims'] as $dm):
            $dpct = (int)(($dm['score'] / 10) * 100);
            $dcol = $dm['score'] >= 7 ? 'var(--green)' : ($dm['score'] >= 5 ? '#00C8FF' : 'var(--red)');
          ?>
          <div title="<?= htmlspecialchars($dm['label']) ?>: <?= number_format($dm['score'],1) ?>" style="flex:1;display:flex;flex-direction:column;justify-content:flex-end;">
            <div style="height:<?= max(2, (int)($dpct * 0.13)) ?>px;background:<?= $dcol ?>;border-radius:1px;opacity:.7;"></div>
          </div>
          <?php endforeach; ?>
          <div style="font-size:7px;color:var(--ink4);padding-left:5px;white-space:nowrap;line-height:1;padding-bottom:1px;" title="Raw AI score"><?= number_format($ov,1) ?></div>
        </div>
        <?php endif; ?>
      </div>
      <!-- Aptum composite score + raw AI score -->
      <div style="text-align:center;padding:0 8px;">
        <div style="font-family:var(--disp);font-size:24px;font-weight:800;color:<?= $aptColor ?>;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em<?= $aptGlow ?>;"><?= number_format($apt, 1) ?></div>
        <div style="height:4px;background:var(--bdr);margin:4px 4px 3px;border-radius:99px;overflow:hidden;"><div style="width:<?= $aptPct ?>%;height:100%;background:<?= $aptColor ?>;border-radius:99px;"></div></div>
        <div style="display:flex;align-items:center;justify-content:center;gap:5px;">
          <div style="font-size:7px;color:var(--ink4);letter-spacing:.12em;text-transform:uppercase;"><?= htmlspecialchars($r['grade'] ?? '') ?></div>
          <div style="font-size:9px;font-weight:600;color:var(--ink3);letter-spacing:.03em;">AI <?= number_format($ov, 1) ?></div>
        </div>
      </div>
      <!-- ER -->
      <div class="lb-c-er" style="text-align:right;padding-right:2px;">
        <?php if ($r['er']): ?>
        <div style="display:inline-block;padding:2px 7px;background:<?= $erBg ?>;border-radius:3px;">
          <div style="font-size:11px;font-weight:700;color:<?= $erColor ?>;font-variant-numeric:tabular-nums;"><?= htmlspecialchars($r['er']) ?></div>
        </div>
        <div style="font-size:7px;color:var(--ink4);letter-spacing:.08em;margin-top:2px;">ER</div>
        <?php else: ?>
        <div style="font-size:9px;color:var(--ink5);">—</div>
        <?php endif; ?>
      </div>
      <!-- Algo risk -->
      <div class="lb-c-risk" style="text-align:right;padding-right:2px;">
        <div style="display:inline-block;padding:2px 7px;background:<?= $riskBg ?>;border-radius:3px;">
          <div style="font-size:11px;font-weight:700;color:<?= $riskColor ?>;font-variant-numeric:tabular-nums;"><?= $algoR ?></div>
        </div>
        <div style="font-size:7px;color:var(--ink4);letter-spacing:.08em;margin-top:2px;">RISK</div>
      </div>
      <!-- Followers / reach -->
      <div class="lb-c-reach" style="text-align:right;padding-right:14px;">
        <div style="font-size:11px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums;"><?= htmlspecialchars($r['followers'] ?? '—') ?></div>
        <div style="font-size:7px;color:var(--ink4);letter-spacing:.05em;margin-top:2px;"><?= relTime($r['scannedAt']) ?></div>
      </div>
    </a>
    <?php endforeach; ?>
  </div>
  <?php endif; ?>

</div>

<script>
<?php if (!empty($evalData)): ?>
var EVAL_USERNAME = <?= json_encode($evalData['username'] ?? '') ?>;
var EVAL_SCORE    = <?= json_encode(number_format((float)($evalData['evaluation']['overall'] ?? 0), 1)) ?>;
var EVAL_URL      = 'https://aptum.fun/evaluate?u=' + encodeURIComponent(EVAL_USERNAME);
<?php
$_score   = number_format((float)($evalData['evaluation']['overall'] ?? 0), 1);
$_grade   = $evalData['evaluation']['grade'] ?? '';
$_niche   = $evalData['evaluation']['niche'] ?? '';
$_er      = $evalData['evaluation']['report']['weighted_er_pct'] ?? '';
$_fallbackCaption =
    'ran @' . ($evalData['username'] ?? '') . " through aptum's X evaluation." . "\n\n" .
    $_score . '/10 · Grade ' . $_grade .
    ($_niche   ? ' · ' . $_niche : '') .
    ($_er      ? "\nER: " . $_er : '');
?>
var SHARE_CAPTION = <?= json_encode($evalData['shareCaption'] ?? $_fallbackCaption) ?>;
<?php endif; ?>
(function(){
  function clock(){var d=new Date(),el=document.getElementById('tb-clock');
    if(el)el.textContent=d.toLocaleTimeString('en-US',{hour12:false,hour:'2-digit',minute:'2-digit',second:'2-digit'});}
  clock();setInterval(clock,1000);
})();

// ── Fetch card image blob (shared by all three actions) ──
function fetchCardBlob(){
  return fetch('/evaluate?screenshot=1&u=<?= rawurlencode($evalData['username'] ?? '') ?>')
    .then(function(r){if(!r.ok)return r.text().then(function(t){throw new Error(t||r.status)});return r.blob();});
}

function downloadCard(){
  var btn=document.getElementById('dl-btn'),status=document.getElementById('dl-status');
  btn.disabled=true;btn.textContent='Fetching…';status.textContent='';
  fetchCardBlob()
    .then(function(blob){
      var a=document.createElement('a');a.href=URL.createObjectURL(blob);
      a.download='aptum-@<?= addslashes($evalData['username'] ?? 'eval') ?>-<?= number_format((float)($evalData['evaluation']['overall'] ?? 0), 1) ?>.png';
      a.click();setTimeout(function(){URL.revokeObjectURL(a.href)},5000);
      btn.disabled=false;btn.textContent='↓ Download';status.textContent='Saved ✓';
      setTimeout(function(){status.textContent=''},2500);
    })
    .catch(function(e){btn.disabled=false;btn.textContent='↓ Download';status.textContent='Failed: '+e.message;});
}

function copyCardImage(){
  var btn=document.getElementById('copy-btn'),status=document.getElementById('dl-status');
  if(!navigator.clipboard||!window.ClipboardItem){
    status.textContent='Clipboard not supported in this browser';return;
  }
  btn.disabled=true;btn.textContent='Copying…';status.textContent='';
  fetchCardBlob()
    .then(function(blob){
      return navigator.clipboard.write([new ClipboardItem({'image/png':blob})]);
    })
    .then(function(){
      btn.disabled=false;btn.textContent='⬡ Copy Image';status.textContent='Copied to clipboard ✓';
      setTimeout(function(){status.textContent=''},2500);
    })
    .catch(function(e){
      btn.disabled=false;btn.textContent='⬡ Copy Image';
      status.textContent=e.name==='NotAllowedError'?'Allow clipboard access first':'Copy failed: '+e.message;
    });
}

function shareOnX(){
  var btn=document.getElementById('share-btn'),status=document.getElementById('dl-status');
  if(typeof SHARE_CAPTION==='undefined'||typeof EVAL_URL==='undefined'){
    status.textContent='Share data not available';return;
  }
  btn.disabled=true;btn.textContent='Opening…';status.textContent='';
  var text=SHARE_CAPTION+'\n\n'+EVAL_URL;
  var intentUrl='https://x.com/intent/tweet?text='+encodeURIComponent(text);
  var popup=window.open(intentUrl,'_blank','width=600,height=450,scrollbars=yes');
  setTimeout(function(){
    btn.disabled=false;btn.textContent='𝕏 Share';
    if(!popup||popup.closed){status.textContent='Popup blocked — check your browser';}
  },800);
}

// Leaderboard column (i) tooltips — hover on desktop, click/tap on mobile
document.addEventListener('DOMContentLoaded', function(){
  var activeTooltip = null;
  function hideAll() {
    document.querySelectorAll('.lb-tooltip').forEach(function(t){ t.style.display='none'; });
    activeTooltip = null;
  }
  document.querySelectorAll('.lb-info-icon').forEach(function(icon){
    var tipId = icon.getAttribute('data-tip');
    var tip = tipId ? document.getElementById(tipId) : null;
    if (!tip) return;
    icon.addEventListener('mouseenter', function(){ hideAll(); tip.style.display='block'; activeTooltip=tip; });
    icon.addEventListener('mouseleave', function(){ setTimeout(function(){ if(!tip.matches(':hover')) { tip.style.display='none'; if(activeTooltip===tip) activeTooltip=null; } }, 120); });
    tip.addEventListener('mouseleave', function(){ tip.style.display='none'; if(activeTooltip===tip) activeTooltip=null; });
    icon.addEventListener('click', function(e){
      e.stopPropagation();
      if(tip.style.display==='block'){ tip.style.display='none'; activeTooltip=null; }
      else { hideAll(); tip.style.display='block'; activeTooltip=tip; }
    });
    tip.addEventListener('click', function(e){ e.stopPropagation(); });
  });
  document.addEventListener('click', hideAll);
});
</script>
</body>
</html>
