// ৯. দৈনিক ও ধারাবাহিক লগইন অ্যাক্টিভিটি রিওয়ার্ড ইঞ্জিন (Daily, Weekly & Monthly Streak)
if (!function_exists('process_user_daily_login_rewards')) {
    function process_user_daily_login_rewards($pdo, $user_id) {
        $user_id = intval($user_id);
        if ($user_id <= 0) return;

        $today = date('Y-m-d');

        // সেশন মেমোরি: আজকের দিনে ইতিমধ্যে চেক হয়ে থাকলে প্রতি পেজে রিপিট কুয়েরি বন্ধ রাখা
        if (isset($_SESSION['tr_login_streak_checked']) && $_SESSION['tr_login_streak_checked'] === $today) {
            return;
        }

        try {
            $stmt = $pdo->prepare("SELECT last_login_date, streak_days, total_login_days FROM user_login_streaks WHERE user_id = ? LIMIT 1");
            $stmt->execute([$user_id]);
            $row = $stmt->fetch();

            if (!$row) {
                // নতুন ইউজার: আজ থেকে ১ম স্ট্রিক শুরু (+১ পয়েন্ট দৈনিক বোনাস)
                $pdo->prepare("INSERT INTO user_login_streaks (user_id, last_login_date, streak_days, total_login_days) VALUES (?, ?, 1, 1)")->execute([$user_id, $today]);
                
                $pdo->prepare("UPDATE users SET points = points + 1 WHERE id = ?")->execute([$user_id]);
                $pdo->prepare("INSERT INTO points_log (user_id, points_earned, action_type, remarks) VALUES (?, 1, 'daily_login_bonus', 'দৈনিক প্রথম লগইন বোনাস')")->execute([$user_id]);
                add_notification($pdo, $user_id, 'points', "🌟 দৈনিক লগইন বোনাস!", "আজ সাইটে প্রথম লগইন করায় আপনার একাউন্টে +১ পয়েন্ট যুক্ত হয়েছে!", "/profile.php");
            } else {
                $last_date = $row['last_login_date'];
                
                if ($last_date === $today) {
                    $_SESSION['tr_login_streak_checked'] = $today;
                    return;
                }

                $yesterday = date('Y-m-d', strtotime('-1 day'));
                $new_streak = 1;
                
                if ($last_date === $yesterday) {
                    // টানা ধারাবাহিক লগইন!
                    $new_streak = intval($row['streak_days']) + 1;
                }

                $new_total = intval($row['total_login_days']) + 1;
                $pdo->prepare("UPDATE user_login_streaks SET last_login_date = ?, streak_days = ?, total_login_days = ? WHERE user_id = ?")->execute([$today, $new_streak, $new_total, $user_id]);

                // ক. দৈনিক লগইন পয়েন্ট প্রদান (+১ pt)
                $pdo->prepare("UPDATE users SET points = points + 1 WHERE id = ?")->execute([$user_id]);
                $pdo->prepare("INSERT INTO points_log (user_id, points_earned, action_type, remarks) VALUES (?, 1, 'daily_login_bonus', 'দৈনিক প্রথম লগইন বোনাস')")->execute([$user_id]);
                add_notification($pdo, $user_id, 'points', "🌟 দৈনিক লগইন বোনাস!", "আজকের দৈনিক প্রথম লগইনের জন্য +১ পয়েন্ট অর্জন করেছেন (স্ট্রিক: {$new_streak} দিন)!", "/profile.php");

                // খ. ৭ দিনের সাপ্তাহিক ধারাবাহিকতা বোনাস (+৫ pts)
                if ($new_streak % 7 === 0) {
                    $pdo->prepare("UPDATE users SET points = points + 5 WHERE id = ?")->execute([$user_id]);
                    $pdo->prepare("INSERT INTO points_log (user_id, points_earned, action_type, remarks) VALUES (?, 5, 'weekly_login_streak', 'টানা ৭ দিন লগইন স্ট্রিক বোনাস')")->execute([$user_id]);
                    add_notification($pdo, $user_id, 'points', "🔥 ৭ দিনের স্ট্রিক বোনাস!", "অভিনন্দন! টানা ৭ দিন সাইটে সক্রিয় থাকায় স্পেশাল সাপ্তাহিক স্ট্রিক বোনাস +৫ পয়েন্ট পেয়েছেন!", "/profile.php");
                }

                // গ. ৩০ দিনের মাসিক সুপার লয়ালটি বোনাস (+২০ pts)
                if ($new_streak % 30 === 0) {
                    $pdo->prepare("UPDATE users SET points = points + 20 WHERE id = ?")->execute([$user_id]);
                    $pdo->prepare("INSERT INTO points_log (user_id, points_earned, action_type, remarks) VALUES (?, 20, 'monthly_login_streak', 'টানা ৩০ দিন মাসিক লগইন বোনাস')")->execute([$user_id]);
                    add_notification($pdo, $user_id, 'points', "👑 ৩০ দিনের মাসিক সুপার বোনাস!", "অসাধারণ! টানা ৩০ দিন সাইটে সক্রিয় থাকার জন্য মেগা লয়ালটি রিওয়ার্ড +২০ পয়েন্ট পেয়েছেন!", "/profile.php");
                }
            }

            $_SESSION['tr_login_streak_checked'] = $today;
        } catch (Exception $e) {}
    }
}

// ১০. স্বয়ংক্রিয় ইমেজ কম্প্রেশন ইঞ্জিন (Auto-Compress to Under 100 KB WebP/JPEG)
if (!function_exists('compress_image_under_max_kb')) {
    function compress_image_under_max_kb($source_file, $target_file, $max_kb = 100, $max_width = 1200) {
        $info = @getimagesize($source_file);
        if (!$info) return false;

        $mime = $info['mime'];
        $orig_width = $info[0];
        $orig_height = $info[1];

        // ক. ইমেজ রিসোর্স লোড করা
        switch ($mime) {
            case 'image/jpeg':
            case 'image/jpg':
                $image = @imagecreatefromjpeg($source_file);
                break;
            case 'image/png':
                $image = @imagecreatefrompng($source_file);
                break;
            case 'image/webp':
                $image = function_exists('imagecreatefromwebp') ? @imagecreatefromwebp($source_file) : false;
                break;
            case 'image/gif':
                $image = @imagecreatefromgif($source_file);
                break;
            default:
                $image = false;
        }

        if (!$image) return false;

        // খ. ডাইমেনশন অপ্টিমাইজেশন (সর্বোচ্চ ১২০০ পিক্সেল উইডথ)
        $new_width = $orig_width;
        $new_height = $orig_height;

        if ($orig_width > $max_width) {
            $new_width = $max_width;
            $new_height = intval(round(($orig_height / $orig_width) * $max_width));
        }

        $canvas = imagecreatetruecolor($new_width, $new_height);

        // ট্রান্সপারেন্সি ও আলফা চ্যানেল সংরক্ষণ
        $use_webp = function_exists('imagewebp');
        if ($mime === 'image/png' || $mime === 'image/webp') {
            imagealphablending($canvas, false);
            imagesavealpha($canvas, true);
            $transparent = imagecolorallocatealpha($canvas, 255, 255, 255, 127);
            imagefilledrectangle($canvas, 0, 0, $new_width, $new_height, $transparent);
        } else {
            $white = imagecolorallocate($canvas, 255, 255, 255);
            imagefilledrectangle($canvas, 0, 0, $new_width, $new_height, $white);
        }

        imagecopyresampled($canvas, $image, 0, 0, 0, 0, $new_width, $new_height, $orig_width, $orig_height);
        imagedestroy($image);

        // গ. কোয়ালিটি লুপ: স্বয়ংক্রিয়ভাবে ১০০ KB এর নিচে নামানো
        $max_bytes = $max_kb * 1024;
        $qualities = [82, 72, 60, 48, 38];

        foreach ($qualities as $q) {
            if ($use_webp) {
                imagealphablending($canvas, true);
                imagesavealpha($canvas, true);
                imagewebp($canvas, $target_file, $q);
            } else {
                imagejpeg($canvas, $target_file, $q);
            }

            if (file_exists($target_file) && filesize($target_file) <= $max_bytes) {
                imagedestroy($canvas);
                return true;
            }
        }

        // ঘ. অতিরিক্ত বড় রেজোলিউশনের ক্ষেত্রে স্কেলিং করে ফাইনাল কম্প্রেশন
        $scaled_w = intval(round($new_width * 0.75));
        $scaled_h = intval(round($new_height * 0.75));
        $small_canvas = imagecreatetruecolor($scaled_w, $scaled_h);
        
        if ($use_webp) {
            imagealphablending($small_canvas, false);
            imagesavealpha($small_canvas, true);
        } else {
            $white = imagecolorallocate($small_canvas, 255, 255, 255);
            imagefilledrectangle($small_canvas, 0, 0, $scaled_w, $scaled_h, $white);
        }

        imagecopyresampled($small_canvas, $canvas, 0, 0, 0, 0, $scaled_w, $scaled_h, $new_width, $new_height);
        imagedestroy($canvas);

        if ($use_webp) {
            imagealphablending($small_canvas, true);
            imagesavealpha($small_canvas, true);
            imagewebp($small_canvas, $target_file, 55);
        } else {
            imagejpeg($small_canvas, $target_file, 55);
        }

        imagedestroy($small_canvas);
        return true;
    }
}

// ১১. ব্র্যান্ডেড ইমেল ভেরিফিকেশন ওটিপি প্রেরক ফাংশন (TipsRound.Com Email Verification)
if (!function_exists('send_tipsround_verification_email')) {
    function send_tipsround_verification_email($to_email, $user_name, $otp_code) {
        $subject = "=?UTF-8?B?" . base64_encode("TipsRound.Com - ইমেল ভেরিফিকেশন কোড") . "?=";
        $from_email = "noreply@tipsround.com";
        $from_header = "TipsRound.Com <" . $from_email . ">";

        $headers  = "MIME-Version: 1.0\r\n";
        $headers .= "Content-Type: text/html; charset=UTF-8\r\n";
        $headers .= "From: " . $from_header . "\r\n";
        $headers .= "Reply-To: support@tipsround.com\r\n";
        $headers .= "X-Mailer: PHP/" . phpversion() . "\r\n";

        $current_year = date("Y");
        $user_name_safe = htmlspecialchars($user_name, ENT_QUOTES, 'UTF-8');
        $message = <<<HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ইমেল ভেরিফিকেশন - TipsRound.Com</title>
</head>
<body style="margin: 0; padding: 0; background-color: #f1f5f9; font-family: 'Segoe UI', Arial, sans-serif; color: #1e293b;">
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f1f5f9; padding: 30px 15px;">
        <tr>
            <td align="center">
                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 550px; background-color: #ffffff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.06); border: 1px solid #e2e8f0;">
                    <tr>
                        <td align="center" style="background: linear-gradient(135deg, #1e3a8a, #2563eb); padding: 25px 20px;">
                            <h1 style="color: #ffffff; margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.5px;">
                                Tips<span style="color: #38bdf8;">Round</span><span style="color: #34d399; font-size: 16px;">.com</span>
                            </h1>
                            <p style="color: #cbd5e1; margin: 4px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: 1px;">
                                ইমেল ভেরিফিকেশন সেবা
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 30px 25px;">
                            <p style="font-size: 16px; margin: 0 0 15px; color: #1e293b;">
                                প্রিয় <strong>{$user_name_safe}</strong>,
                            </p>
                            <p style="font-size: 14px; line-height: 1.6; color: #475569; margin: 0 0 20px;">
                                TipsRound.Com-এ আপনার অ্যাকাউন্ট ও ইমেল ঠিকানা যাচাইয়ের জন্য অনুরোধ করা হয়েছে। আপনার ৬ ডিজিটের গোপন সিকিউরিটি ওটিপি (OTP) কোডটি নিচে দেওয়া হলো:
                            </p>
                            <div style="background: #eff6ff; border: 2px dashed #2563eb; border-radius: 8px; padding: 18px; text-align: center; margin: 25px 0;">
                                <span style="font-size: 32px; font-weight: 800; letter-spacing: 6px; color: #1e40af; font-family: monospace;">{$otp_code}</span>
                                <p style="margin: 8px 0 0; font-size: 12px; color: #64748b;">(এই কোডটির মেয়াদ পরবর্তী ১৫ মিনিট পর্যন্ত কার্যকর থাকবে)</p>
                            </div>
                            <p style="font-size: 13px; color: #64748b; line-height: 1.5; margin: 0;">
                                ৩য় বা পরবর্তী পোস্ট প্রকাশ এবং আনলিমিটেড ফিচারের জন্য ইমেল ভেরিফাই থাকা বাধ্যতামূলক। আপনি যদি এই অনুরোধ না করে থাকেন, তবে বার্তাটি উপেক্ষা করুন।
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <td align="center" style="background-color: #f8fafc; padding: 15px; border-top: 1px solid #e2e8f0; font-size: 12px; color: #94a3b8;">
                            &copy; {$current_year} TipsRound.Com | সর্বস্বত্ব সংরক্ষিত
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
HTML;
        return @mail($to_email, $subject, $message, $headers);
    }
}
<!DOCTYPE html>
<html lang="bn" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- ইনস্ট্যান্ট থিম এক্সিকিউশন স্ক্রিপ্ট (০-মিলিসেকেন্ড ফ্লিকার-ফ্রি রেন্ডারিং) -->
    <script>
        (function() {
            try {
                var t = localStorage.getItem('tr_theme');
                if (!t) {
                    var m = document.cookie.match(new RegExp('(?:^|; )tr_theme=([^;]*)'));
                    t = m ? decodeURIComponent(m[1]) : 'light';
                }
                if (t !== 'light' && t !== 'dark' && t !== 'dark-blue') {
                    t = 'light';
                }
                document.documentElement.setAttribute('data-theme', t);
            } catch (e) {}
        })();
    </script>
    
    <!-- ডাইনামিক এসইও টাইটেল ও মেটা ডেসক্রিপশন -->
    <title>Muhammad Sajib (@admin) - প্রোফাইল</title>
    <meta name="description" content="TipsRound.Com হলো প্রযুক্তি, প্রোগ্রামিং, অ্যান্ড্রয়েড ট্রিকস এবং অনলাইন লার্নিংয়ের একটি বিশ্বস্ত উন্মুক্ত প্ল্যাটফর্ম।">
    
    
    
        <!-- অফিসিয়াল এসইও ক্যানোনিক্যাল ট্যাগ (ডুপ্লিকেট ইউআরএল প্রতিরোধ) -->
    <link rel="canonical" href="https://tipsround.com/">

    <!-- Open Graph Meta Tags (Telegram, WhatsApp & Facebook থাম্বনেইল সাপোর্ট) -->
    <meta property="og:type" content="article">
    <meta property="og:site_name" content="TipsRound.Com">
    <meta property="og:title" content="Muhammad Sajib (@admin) - প্রোফাইল">
    <meta property="og:description" content="TipsRound.Com হলো প্রযুক্তি, প্রোগ্রামিং, অ্যান্ড্রয়েড ট্রিকস এবং অনলাইন লার্নিংয়ের একটি উন্মুক্ত প্ল্যাটফর্ম।">
    <meta property="og:url" content="https://tipsround.com/">
    <meta property="og:image" content="https://tipsround.com/favicon.png">
    <meta property="og:image:secure_url" content="https://tipsround.com/favicon.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">

    <!-- Twitter / Telegram Card Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Muhammad Sajib (@admin) - প্রোফাইল">
    <meta name="twitter:description" content="TipsRound.Com হলো প্রযুক্তি, প্রোগ্রামিং, অ্যান্ড্রয়েড ট্রিকস এবং অনলাইন লার্নিংয়ের একটি উন্মুক্ত প্ল্যাটফর্ম।">
    <meta name="twitter:image" content="https://tipsround.com/favicon.png">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/favicon.png?v=1793905394">
    <link rel="shortcut icon" type="image/png" href="/favicon.png?v=1793905394">

    <!-- Google Fonts & Font Awesome Icons -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        /* ==========================================================================
           TipsRound.Com - ৩-থিম সিস্টেম কালার প্যালেট (Light / Dark / Dark Blue)
           ========================================================================== */
        
        :root, html[data-theme="light"] {
            --bg-color: #f1f5f9;
            --card-bg: #ffffff;
            --card-header-bg: #f8fafc;
            --text-main: #1e293b;
            --text-muted: #64748b;
            --text-sub: #475569;
            --primary-blue: #2563eb;
            --primary-hover: #1d4ed8;
            --border-color: #cbd5e1;
            --border-light: #e2e8f0;
            --accent-orange: #d97706;
            --accent-green: #16a34a;
            --site-header-bg: #ffffff;
            --site-header-border: rgba(226, 232, 240, 0.90);
            --nav-btn-bg: #f8fafc;
            --nav-btn-border: #e2e8f0;
            --nav-btn-text: #334155;
            --input-bg: #ffffff;
            --input-border: #cbd5e1;
            --input-text: #0f172a;
            --footer-bg: #ffffff;
            --tag-bg: #eff6ff;
            --tag-text: #2563eb;
            --dropdown-bg: #ffffff;
            --dropdown-hover: #f8fafc;
            --card-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);
        }

        html[data-theme="dark"] {
            --bg-color: #0b0f19;
            --card-bg: #141b2d;
            --card-header-bg: #0f1523;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --text-sub: #cbd5e1;
            --primary-blue: #3b82f6;
            --primary-hover: #60a5fa;
            --border-color: #26334d;
            --border-light: #1c273c;
            --accent-orange: #fbbf24;
            --accent-green: #22c55e;
            --site-header-bg: #121828;
            --site-header-border: #222e45;
            --nav-btn-bg: #182239;
            --nav-btn-border: #26334d;
            --nav-btn-text: #e2e8f0;
            --input-bg: #0b0f19;
            --input-border: #2c3a57;
            --input-text: #f8fafc;
            --footer-bg: #121828;
            --tag-bg: rgba(59, 130, 246, 0.16);
            --tag-text: #93c5fd;
            --dropdown-bg: #141b2d;
            --dropdown-hover: #1c263e;
            --card-shadow: 0 4px 22px rgba(0, 0, 0, 0.45);
        }

        html[data-theme="dark-blue"] {
            --bg-color: #060d1f;
            --card-bg: #0d1a38;
            --card-header-bg: #091329;
            --text-main: #f0f6fc;
            --text-muted: #93c5fd;
            --text-sub: #bfdbfe;
            --primary-blue: #38bdf8;
            --primary-hover: #0ea5e9;
            --border-color: #1a2f5c;
            --border-light: #142447;
            --accent-orange: #f59e0b;
            --accent-green: #10b981;
            --site-header-bg: #0a1630;
            --site-header-border: #1a2f5c;
            --nav-btn-bg: #102044;
            --nav-btn-border: #1d3567;
            --nav-btn-text: #e0f2fe;
            --input-bg: #071228;
            --input-border: #203a70;
            --input-text: #f0f6fc;
            --footer-bg: #0a1630;
            --tag-bg: rgba(56, 189, 248, 0.16);
            --tag-text: #7dd3fc;
            --dropdown-bg: #0d1a38;
            --dropdown-hover: #13244c;
            --card-shadow: 0 4px 25px rgba(2, 6, 23, 0.6);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body { 
            font-family: "Poppins", sans-serif; 
            background-color: var(--bg-color); 
            color: var(--text-main); 
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        /* প্রিমিয়াম সাইট হেডার */
        .site-header {
            background: var(--site-header-bg);
            border-bottom: 1px solid var(--site-header-border);
            box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.05);
            position: relative;
            z-index: 100;
            transition: background-color 0.2s ease, border-color 0.2s ease;
        }
        .site-header::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #2563eb 0%, #06b6d4 50%, #10b981 100%);
        }

        .header-container {
            max-width: 1150px;
            margin: 0 auto;
            padding: 22px 20px 16px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        .header-brand-center {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .brand-link {
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 14px;
            transition: all 0.25s ease;
        }
        .brand-mark {
            width: 48px;
            height: 48px;
            border-radius: 13px;
            background: linear-gradient(135deg, #1e3a8a, #2563eb 60%, #06b6d4);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.45rem;
            box-shadow: 0 4px 15px rgba(37, 99, 235, 0.32);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            position: relative;
            overflow: hidden;
        }
        .brand-mark::after {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 60%);
            opacity: 0.6;
            pointer-events: none;
        }
        .brand-link:hover .brand-mark {
            transform: translateY(-2px) rotate(4deg);
            box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
        }
        .brand-text-wrap {
            display: flex;
            flex-direction: column;
            text-align: left;
        }
        .brand-title {
            font-size: 2.15rem;
            font-weight: 900;
            line-height: 1.1;
            color: var(--text-main);
            letter-spacing: 0.2px;
            display: flex;
            align-items: baseline;
            transition: color 0.2s ease;
        }
        .brand-title .brand-accent {
            background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .brand-title .brand-tld {
            font-size: 1.15rem;
            font-weight: 800;
            color: #059669;
            margin-left: 3px;
            -webkit-text-fill-color: #059669;
            letter-spacing: 0px;
        }
        .brand-tagline {
            font-size: 0.70rem;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1.2px;
            display: block;
            margin-top: 2px;
        }

        /* ন্যাভিগেশন বার */
        .nav-menu-center {
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }
        .nav-menu-center a {
            color: var(--nav-btn-text);
            text-decoration: none;
            font-size: 0.88rem;
            font-weight: 600;
            padding: 8px 15px;
            border-radius: 8px;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: var(--nav-btn-bg);
            border: 1px solid var(--nav-btn-border);
        }
        .nav-menu-center a:hover {
            color: var(--primary-blue);
            background: var(--dropdown-hover);
            border-color: var(--primary-blue);
            transform: translateY(-1px);
        }
        
        /* থিম সুইচিং বাটন ও ড্রপডাউন মেনু */
        .theme-switcher-wrapper {
            position: relative;
            display: inline-flex;
            align-items: center;
        }
        .nav-theme-btn {
            background: var(--nav-btn-bg);
            border: 1px solid var(--nav-btn-border);
            color: var(--nav-btn-text);
            width: 38px;
            height: 38px;
            border-radius: 10px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05rem;
            transition: all 0.2s ease;
            font-family: inherit;
            padding: 0;
            box-sizing: border-box;
            box-shadow: 0 1px 3px rgba(0,0,0,0.03);
        }
        .nav-theme-btn:hover {
            color: var(--primary-blue);
            border-color: var(--primary-blue);
            background: var(--dropdown-hover);
            transform: translateY(-1px) scale(1.06);
            box-shadow: 0 3px 8px rgba(0,0,0,0.08);
        }
        .theme-dropdown-menu {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 250px;
            max-width: calc(100vw - 20px);
            background: var(--dropdown-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: 0 12px 30px rgba(0,0,0,0.22);
            z-index: 10001;
            padding: 8px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            animation: fadeInDown 0.18s ease-out;
        }
        .theme-dropdown-title {
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--text-muted);
            letter-spacing: 0.8px;
            padding: 6px 10px 4px 10px;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 4px;
        }
        .theme-opt-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 8px 10px;
            border: 1px solid transparent;
            border-radius: 8px;
            background: transparent;
            color: var(--text-main);
            cursor: pointer;
            font-family: inherit;
            text-align: left;
            transition: all 0.15s ease;
        }
        .theme-opt-item:hover {
            background: var(--dropdown-hover);
        }
        .theme-opt-item.active {
            background: var(--dropdown-hover);
            border-color: var(--primary-blue);
        }
        .theme-opt-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .theme-opt-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.95rem;
            flex-shrink: 0;
        }
        .theme-opt-name {
            font-size: 0.84rem;
            font-weight: 700;
            color: var(--text-main);
        }
        .theme-opt-desc {
            font-size: 0.72rem;
            color: var(--text-muted);
        }
        .theme-opt-check {
            color: var(--primary-blue);
            font-size: 0.88rem;
        }

        /* ফুটার থিম পিলস */
        .footer-theme-pills {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--card-header-bg);
            border: 1px solid var(--border-color);
            padding: 3px;
            border-radius: 20px;
        }
        .theme-pill-btn {
            border: none;
            background: transparent;
            color: var(--text-muted);
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 0.76rem;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: all 0.18s ease;
            font-family: inherit;
        }
        .theme-pill-btn:hover {
            color: var(--text-main);
        }
        .theme-pill-btn.active {
            background: var(--primary-blue);
            color: #ffffff !important;
            box-shadow: 0 2px 6px rgba(37,99,235,0.3);
        }

        /* ডিসপ্লের একদম শীর্ষ-বাম কর্নারে নোটিফিকেশন বেল */
        .header-corner-left {
            position: absolute;
            top: 5px;
            left: 5px;
            z-index: 105;
        }
        /* ডিসপ্লের একদম শীর্ষ-ডান কর্নারে মেসেজ আইকন */
        .header-corner-right {
            position: absolute;
            top: 5px;
            right: 5px;
            z-index: 105;
        }
        .nav-msg-corner-btn,
        .nav-notif-btn {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            color: var(--text-main);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            font-size: 0.95rem;
            box-shadow: 0 2px 6px rgba(0,0,0,0.06);
            transition: all 0.2s ease;
            text-decoration: none;
        }
        .nav-msg-corner-btn:hover,
        .nav-notif-btn:hover {
            background: var(--dropdown-hover);
            color: var(--primary-blue);
            border-color: var(--primary-blue);
            transform: scale(1.06);
        }
        .badge-unread-notif {
            position: absolute;
            top: -4px;
            right: -4px;
            background: #ef4444;
            color: white;
            border-radius: 50%;
            font-size: 0.65rem;
            font-weight: 700;
            min-width: 17px;
            height: 17px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 3px;
            box-shadow: 0 2px 6px rgba(239,68,68,0.5);
            border: 2px solid var(--card-bg);
        }
        .notif-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            left: 0; right: auto;
            width: 350px;
            max-width: calc(100vw - 12px);
            background: var(--dropdown-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.18);
            z-index: 10000;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            animation: fadeInDown 0.18s ease-out;
        }
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .notif-header {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--card-header-bg);
        }
        .btn-mark-all-read {
            background: none;
            border: none;
            color: var(--primary-blue);
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .btn-mark-all-read:hover {
            text-decoration: underline;
        }
        .notif-filter-bar {
            display: flex;
            gap: 6px;
            padding: 8px 12px;
            border-bottom: 1px solid var(--border-color);
            background: var(--card-bg);
            overflow-x: auto;
        }
        .notif-tab {
            background: var(--card-header-bg);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 4px 10px;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-muted);
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.15s;
        }
        .notif-tab:hover {
            background: var(--dropdown-hover);
            color: var(--text-main);
        }
        .notif-tab.active {
            background: var(--tag-bg);
            color: var(--primary-blue);
            border-color: var(--primary-blue);
        }
        .notif-list-body {
            max-height: 380px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        .notif-item {
            display: flex;
            gap: 12px;
            padding: 12px 14px;
            border-bottom: 1px solid var(--border-light);
            text-decoration: none;
            color: var(--text-main);
            transition: background 0.15s;
            position: relative;
            align-items: flex-start;
        }
        .notif-item:hover {
            background: var(--card-header-bg);
        }
        .notif-item.unread {
            background: var(--tag-bg);
        }
        .notif-item.unread::after {
            content: '';
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--primary-blue);
        }
        .notif-icon-box {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 0.95rem;
        }
        .notif-content {
            flex: 1;
            min-width: 0;
        }
        .notif-title {
            font-size: 0.85rem;
            font-weight: 700;
            margin-bottom: 2px;
            color: var(--text-main);
        }
        .notif-desc {
            font-size: 0.78rem;
            color: var(--text-muted);
            line-height: 1.4;
            word-break: break-word;
        }
        .notif-time {
            font-size: 0.68rem;
            color: var(--text-muted);
            margin-top: 4px;
        }
        .notif-footer {
            padding: 10px 14px;
            background: var(--card-header-bg);
            border-top: 1px solid var(--border-color);
            text-align: center;
        }
        .notif-footer-link {
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--primary-blue);
            text-decoration: none;
        }
        .notif-footer-link:hover {
            text-decoration: underline;
        }

        .nav-menu-center a.nav-messages {
            color: var(--primary-blue);
            background: var(--tag-bg);
            border-color: var(--primary-blue);
        }
        .nav-menu-center a.nav-refer {
            color: var(--accent-green);
            background: rgba(16, 185, 129, 0.12);
            border-color: rgba(16, 185, 129, 0.35);
        }
        .nav-menu-center a.nav-refer:hover {
            background: rgba(16, 185, 129, 0.22);
        }
        .nav-menu-center a.nav-admin {
            color: #ef4444;
            background: rgba(239, 68, 68, 0.12);
            border-color: rgba(239, 68, 68, 0.35);
        }
        .nav-menu-center a.nav-admin:hover {
            background: rgba(239, 68, 68, 0.22);
            color: #dc2626;
        }
        .nav-menu-center a.nav-logout {
            color: var(--text-muted);
            padding: 8px 12px;
        }
        .nav-menu-center a.nav-logout:hover {
            color: #ef4444;
            background: rgba(239, 68, 68, 0.12);
            border-color: rgba(239, 68, 68, 0.35);
        }

        /* নতুন পোস্ট বাটন */
        .btn-new-post {
            background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
            color: #ffffff !important;
            border-color: #1d4ed8 !important;
            font-weight: 600 !important;
            padding: 8px 18px !important;
            border-radius: 8px !important;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
            transition: all 0.25s ease !important;
        }
        .btn-new-post:hover {
            box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35) !important;
            transform: translateY(-2px) !important;
            color: #ffffff !important;
        }

        .main-wrapper {
            flex: 1;
        }

        /* ==========================================================================
           ইউনিভার্সাল ডার্ক ও ডার্ক-ব্লু ওভাররাইড রুলস (সবগুলো পেজ ও ফাইলের জন্য)
           ========================================================================== */
        html[data-theme="dark"],
        html[data-theme="dark-blue"] {
            color-scheme: dark;
        }

        /* কার্ড, পোস্ট আইটেম ও সার্চ বার */
        html[data-theme="dark"] .box-card,
        html[data-theme="dark-blue"] .box-card,
        html[data-theme="dark"] .post-item,
        html[data-theme="dark-blue"] .post-item,
        html[data-theme="dark"] .search-wrapper,
        html[data-theme="dark-blue"] .search-wrapper,
        html[data-theme="dark"] .step-card,
        html[data-theme="dark-blue"] .step-card,
        html[data-theme="dark"] .stat-card,
        html[data-theme="dark-blue"] .stat-card {
            background: var(--card-bg) !important;
            border-color: var(--border-color) !important;
            color: var(--text-main) !important;
        }

        html[data-theme="dark"] .box-header,
        html[data-theme="dark-blue"] .box-header {
            background: var(--card-header-bg) !important;
            color: var(--text-main) !important;
            border-color: var(--border-color) !important;
        }

        html[data-theme="dark"] .post-title a,
        html[data-theme="dark-blue"] .post-title a {
            color: var(--text-main) !important;
        }
        html[data-theme="dark"] .post-title a:hover,
        html[data-theme="dark-blue"] .post-title a:hover {
            color: var(--primary-blue) !important;
        }
        html[data-theme="dark"] .post-snippet,
        html[data-theme="dark-blue"] .post-snippet {
            color: var(--text-sub) !important;
        }

        /* ফর্ম ইনপুট, টেক্সটএরিয়া ও সিলেক্ট */
        html[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
        html[data-theme="dark-blue"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
        html[data-theme="dark"] textarea,
        html[data-theme="dark-blue"] textarea,
        html[data-theme="dark"] select,
        html[data-theme="dark-blue"] select {
            background-color: var(--input-bg) !important;
            color: var(--input-text) !important;
            border-color: var(--input-border) !important;
        }
        html[data-theme="dark"] input::placeholder,
        html[data-theme="dark-blue"] input::placeholder,
        html[data-theme="dark"] textarea::placeholder,
        html[data-theme="dark-blue"] textarea::placeholder {
            color: var(--text-muted) !important;
        }

        /* টেবিলসমূহ (অ্যাডমিন ও ইউজার ড্যাশবোর্ড) */
        html[data-theme="dark"] table,
        html[data-theme="dark-blue"] table {
            color: var(--text-main) !important;
            border-color: var(--border-color) !important;
        }
        html[data-theme="dark"] th,
        html[data-theme="dark-blue"] th {
            background: var(--card-header-bg) !important;
            color: var(--text-main) !important;
            border-color: var(--border-color) !important;
        }
        html[data-theme="dark"] td,
        html[data-theme="dark-blue"] td {
            border-color: var(--border-color) !important;
        }
        html[data-theme="dark"] tr:hover,
        html[data-theme="dark-blue"] tr:hover {
            background: rgba(255, 255, 255, 0.04) !important;
        }

        /* এডিটর ও টুলবার (create-post / edit-post) */
        html[data-theme="dark"] .visual-editor,
        html[data-theme="dark-blue"] .visual-editor {
            background: var(--input-bg) !important;
            color: var(--input-text) !important;
            border-color: var(--border-color) !important;
        }
        html[data-theme="dark"] .editor-toolbar,
        html[data-theme="dark-blue"] .editor-toolbar {
            background: var(--card-header-bg) !important;
            border-color: var(--border-color) !important;
        }
        html[data-theme="dark"] .tool-btn,
        html[data-theme="dark-blue"] .tool-btn,
        html[data-theme="dark"] .tool-select,
        html[data-theme="dark-blue"] .tool-select {
            background: var(--nav-btn-bg) !important;
            border-color: var(--border-color) !important;
            color: var(--text-main) !important;
        }

        /* মেসেঞ্জার চ্যাট (messages.php) */
        html[data-theme="dark"] .messenger-card,
        html[data-theme="dark-blue"] .messenger-card {
            background: var(--card-bg) !important;
            border-color: var(--border-color) !important;
        }
        html[data-theme="dark"] .messenger-sidebar,
        html[data-theme="dark-blue"] .messenger-sidebar {
            background: var(--card-header-bg) !important;
            border-color: var(--border-color) !important;
        }
        html[data-theme="dark"] .sidebar-header,
        html[data-theme="dark-blue"] .sidebar-header,
        html[data-theme="dark"] .chat-header,
        html[data-theme="dark-blue"] .chat-header,
        html[data-theme="dark"] .chat-input-bar,
        html[data-theme="dark-blue"] .chat-input-bar {
            background: var(--card-bg) !important;
            border-color: var(--border-color) !important;
        }
        html[data-theme="dark"] .chat-messages-body,
        html[data-theme="dark-blue"] .chat-messages-body {
            background: var(--bg-color) !important;
        }
        html[data-theme="dark"] .conversation-item:hover,
        html[data-theme="dark-blue"] .conversation-item:hover {
            background: var(--card-header-bg) !important;
        }
        html[data-theme="dark"] .conversation-item.active,
        html[data-theme="dark-blue"] .conversation-item.active {
            background: var(--tag-bg) !important;
        }
        html[data-theme="dark"] .msg-row.other .bubble,
        html[data-theme="dark-blue"] .msg-row.other .bubble {
            background: var(--card-header-bg) !important;
            color: var(--text-main) !important;
            border: 1px solid var(--border-color);
        }

        /* আর্টিকেল রিডিং ভিউ ও কোড ব্লক */
        html[data-theme="dark"] .post-article,
        html[data-theme="dark-blue"] .post-article {
            color: var(--text-main) !important;
        }
        html[data-theme="dark"] .post-article h2,
        html[data-theme="dark-blue"] .post-article h2 {
            color: var(--primary-blue) !important;
            border-color: var(--border-color) !important;
        }
        html[data-theme="dark"] .post-article h3,
        html[data-theme="dark-blue"] .post-article h3 {
            color: var(--primary-hover) !important;
        }
        html[data-theme="dark"] .post-article h4,
        html[data-theme="dark-blue"] .post-article h4 {
            color: var(--text-main) !important;
        }
        html[data-theme="dark"] .post-article blockquote,
        html[data-theme="dark-blue"] .post-article blockquote {
            background: var(--card-header-bg) !important;
            color: var(--text-sub) !important;
            border-color: var(--primary-blue) !important;
        }
        html[data-theme="dark"] .post-article pre,
        html[data-theme="dark-blue"] .post-article pre {
            background: var(--input-bg) !important;
            border-color: var(--border-color) !important;
            color: #f1f5f9 !important;
        }
        html[data-theme="dark"] .post-article code,
        html[data-theme="dark-blue"] .post-article code {
            background: var(--card-header-bg) !important;
            color: #f87171 !important;
        }
        html[data-theme="dark"] .post-tag-pill,
        html[data-theme="dark-blue"] .post-tag-pill {
            background: var(--tag-bg) !important;
            color: var(--tag-text) !important;
            border-color: var(--border-color) !important;
        }

        /* ইনলাইন ব্যাকগ্রাউন্ডের সার্বজনীন সমাধান */
        html[data-theme="dark"] [style*="background: #ffffff"],
        html[data-theme="dark"] [style*="background:#ffffff"],
        html[data-theme="dark"] [style*="background: white"],
        html[data-theme="dark"] [style*="background:white"],
        html[data-theme="dark"] [style*="background: #fff"],
        html[data-theme="dark"] [style*="background:#fff"],
        html[data-theme="dark-blue"] [style*="background: #ffffff"],
        html[data-theme="dark-blue"] [style*="background:#ffffff"],
        html[data-theme="dark-blue"] [style*="background: white"],
        html[data-theme="dark-blue"] [style*="background:white"],
        html[data-theme="dark-blue"] [style*="background: #fff"],
        html[data-theme="dark-blue"] [style*="background:#fff"] {
            background: var(--card-bg) !important;
        }

        html[data-theme="dark"] [style*="background: #f8fafc"],
        html[data-theme="dark"] [style*="background:#f8fafc"],
        html[data-theme="dark"] [style*="background: #f1f5f9"],
        html[data-theme="dark"] [style*="background:#f1f5f9"],
        html[data-theme="dark"] [style*="background: #fdfdfd"],
        html[data-theme="dark"] [style*="background:#fdfdfd"],
        html[data-theme="dark-blue"] [style*="background: #f8fafc"],
        html[data-theme="dark-blue"] [style*="background:#f8fafc"],
        html[data-theme="dark-blue"] [style*="background: #f1f5f9"],
        html[data-theme="dark-blue"] [style*="background:#f1f5f9"],
        html[data-theme="dark-blue"] [style*="background: #fdfdfd"],
        html[data-theme="dark-blue"] [style*="background:#fdfdfd"] {
            background: var(--card-header-bg) !important;
        }

        html[data-theme="dark"] [style*="background: #eff6ff"],
        html[data-theme="dark"] [style*="background:#eff6ff"],
        html[data-theme="dark-blue"] [style*="background: #eff6ff"],
        html[data-theme="dark-blue"] [style*="background:#eff6ff"] {
            background: var(--tag-bg) !important;
        }

        /* ইনলাইন টেক্সট কালারের সার্বজনীন সমাধান */
        html[data-theme="dark"] [style*="color: #1e293b"],
        html[data-theme="dark"] [style*="color:#1e293b"],
        html[data-theme="dark"] [style*="color: #0f172a"],
        html[data-theme="dark"] [style*="color:#0f172a"],
        html[data-theme="dark"] [style*="color: #334155"],
        html[data-theme="dark"] [style*="color:#334155"],
        html[data-theme="dark"] [style*="color: #1e3a8a"],
        html[data-theme="dark"] [style*="color:#1e3a8a"],
        html[data-theme="dark-blue"] [style*="color: #1e293b"],
        html[data-theme="dark-blue"] [style*="color:#1e293b"],
        html[data-theme="dark-blue"] [style*="color: #0f172a"],
        html[data-theme="dark-blue"] [style*="color:#0f172a"],
        html[data-theme="dark-blue"] [style*="color: #334155"],
        html[data-theme="dark-blue"] [style*="color:#334155"],
        html[data-theme="dark-blue"] [style*="color: #1e3a8a"],
        html[data-theme="dark-blue"] [style*="color:#1e3a8a"] {
            color: var(--text-main) !important;
        }

        html[data-theme="dark"] [style*="color: #475569"],
        html[data-theme="dark"] [style*="color:#475569"],
        html[data-theme="dark"] [style*="color: #64748b"],
        html[data-theme="dark"] [style*="color:#64748b"],
        html[data-theme="dark-blue"] [style*="color: #475569"],
        html[data-theme="dark-blue"] [style*="color:#475569"],
        html[data-theme="dark-blue"] [style*="color: #64748b"],
        html[data-theme="dark-blue"] [style*="color:#64748b"] {
            color: var(--text-muted) !important;
        }

        /* ইনলাইন বর্ডারের সার্বজনীন সমাধান */
        html[data-theme="dark"] [style*="border: 1px solid #e2e8f0"],
        html[data-theme="dark"] [style*="border:1px solid #e2e8f0"],
        html[data-theme="dark"] [style*="border: 1px solid #cbd5e1"],
        html[data-theme="dark"] [style*="border:1px solid #cbd5e1"],
        html[data-theme="dark-blue"] [style*="border: 1px solid #e2e8f0"],
        html[data-theme="dark-blue"] [style*="border:1px solid #e2e8f0"],
        html[data-theme="dark-blue"] [style*="border: 1px solid #cbd5e1"],
        html[data-theme="dark-blue"] [style*="border:1px solid #cbd5e1"] {
            border-color: var(--border-color) !important;
        }

        @media (max-width: 768px) {
            .header-container {
                padding: 16px 12px 12px 12px;
                gap: 12px;
            }
            .brand-title {
                font-size: 1.70rem;
            }
            .brand-title .brand-tld {
                font-size: 0.95rem;
            }
            .brand-mark {
                width: 40px;
                height: 40px;
                font-size: 1.25rem;
            }
            .nav-menu-center {
                gap: 6px;
                flex-wrap: wrap;
                width: 100%;
                justify-content: center;
                padding-bottom: 4px;
                overflow: visible !important;
            }
            .nav-menu-center a {
                font-size: 0.80rem;
                padding: 6px 10px;
                white-space: nowrap;
            }
            .nav-theme-btn {
                width: 34px;
                height: 34px;
                font-size: 0.95rem;
                border-radius: 8px;
                flex-shrink: 0;
            }

            /* মোবাইল ভার্সন: সরাসরি বাবল ড্রপডাউন (কোনো স্ক্রিন ঢেকে রাখা ব্যাকড্রপ ছাড়া) */
            .theme-dropdown-menu {
                position: absolute !important;
                top: calc(100% + 8px) !important;
                right: 0 !important;
                left: auto !important;
                bottom: auto !important;
                width: 240px !important;
                max-width: calc(100vw - 20px) !important;
                border-radius: 12px !important;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
                padding: 8px !important;
                z-index: 10005 !important;
                background: var(--dropdown-bg) !important;
                border: 1px solid var(--border-color) !important;
                animation: fadeInDown 0.18s ease-out !important;
            }
            .theme-opt-item {
                padding: 10px 12px;
                border-radius: 8px;
                margin-bottom: 3px;
            }
            .theme-opt-name {
                font-size: 0.88rem;
            }
            .theme-opt-desc {
                font-size: 0.72rem;
            }
        }
    </style>
<script>
let currentNotifFilter = 'all';
let isNotifOpen = false;

function toggleNotifDropdown(e) {
    if (e) e.stopPropagation();
    let dd = document.getElementById('notifDropdown');
    if (!dd) return;
    if (dd.style.display === 'none' || dd.style.display === '') {
        dd.style.display = 'flex';
        isNotifOpen = true;
        loadNotifications(currentNotifFilter);
    } else {
        dd.style.display = 'none';
        isNotifOpen = false;
    }
}

function filterNotifs(filterType, btnElem) {
    currentNotifFilter = filterType;
    document.querySelectorAll('.notif-tab').forEach(b => b.classList.remove('active'));
    if (btnElem) btnElem.classList.add('active');
    loadNotifications(filterType);
}

function loadNotifications(filterType) {
    let container = document.getElementById('notifListContainer');
    if (!container) return;

    fetch('/ajax_notifications.php?action=fetch&filter=' + encodeURIComponent(filterType))
    .then(r => r.json())
    .then(data => {
        if (data.status === 'success') {
            let badge = document.getElementById('headerNotifBadge');
            if (badge) {
                if (data.unread_count > 0) {
                    badge.innerText = data.unread_count > 99 ? '99+' : data.unread_count;
                    badge.style.display = 'inline-flex';
                } else {
                    badge.style.display = 'none';
                }
            }

            if (data.notifications && data.notifications.length > 0) {
                let html = '';
                data.notifications.forEach(n => {
                    let unreadClass = n.is_read == 0 ? 'unread' : '';
                    let link = n.link || 'javascript:void(0);';
                    html += `
                        <a href="${link}" class="notif-item ${unreadClass}" onclick="handleNotifClick(${n.id})">
                            <div class="notif-icon-box" style="background:${n.icon_bg}; color:${n.icon_color};">
                                <i class="${n.icon}"></i>
                            </div>
                            <div class="notif-content">
                                <div class="notif-title">${n.title}</div>
                                <div class="notif-desc">${n.message}</div>
                                <div class="notif-time"><i class="fa-regular fa-clock"></i> ${n.time_text}</div>
                            </div>
                        </a>
                    `;
                });
                container.innerHTML = html;
            } else {
                container.innerHTML = `
                    <div style="padding: 35px 20px; text-align: center; color: var(--text-muted); font-size: 0.85rem;">
                        <i class="fa-regular fa-bell-slash" style="font-size: 2rem; color: #cbd5e1; margin-bottom: 8px; display: block;"></i>
                        এই ক্যাটাগরিতে কোনো নোটিফিকেশন নেই।
                    </div>
                `;
            }
        }
    })
    .catch(err => {
        container.innerHTML = '<div style="padding: 20px; text-align: center; color: #ef4444; font-size: 0.82rem;">লোড করতে সমস্যা হয়েছে।</div>';
    });
}

function handleNotifClick(notifId) {
    if (notifId > 0) {
        let fd = new FormData();
        fd.append('action', 'mark_read');
        fd.append('id', notifId);
        fetch('/ajax_notifications.php', { method: 'POST', body: fd }).catch(() => {});
    }
}

function markAllNotifsRead(e) {
    if (e) e.stopPropagation();
    let fd = new FormData();
    fd.append('action', 'mark_all_read');
    fetch('/ajax_notifications.php', { method: 'POST', body: fd })
    .then(r => r.json())
    .then(data => {
        let badge = document.getElementById('headerNotifBadge');
        if (badge) badge.style.display = 'none';
        document.querySelectorAll('.notif-item').forEach(el => el.classList.remove('unread'));
    });
}

document.addEventListener('click', function(e) {
    let wrap = document.querySelector('.notif-wrapper');
    let dd = document.getElementById('notifDropdown');
    if (dd && isNotifOpen && wrap && !wrap.contains(e.target)) {
        dd.style.display = 'none';
        isNotifOpen = false;
    }
});

// ==========================================
// TipsRound.Com - ৩-থিম ক্লায়েন্ট-সাইড ইঞ্জিন
// ==========================================
function selectTheme(themeName) {
    if (themeName !== 'light' && themeName !== 'dark' && themeName !== 'dark-blue') {
        themeName = 'light';
    }
    
    // রুট এলিমেন্টে ডাটা-থিম এট্রিবিউট সেট করা
    document.documentElement.setAttribute('data-theme', themeName);
    
    // লোকালস্টোরেজে সংরক্ষণ
    try {
        localStorage.setItem('tr_theme', themeName);
    } catch(e) {}
    
    // কুকিতে ১ বছরের জন্য সংরক্ষণ (এসএসআর লোডিংয়ের জন্য)
    document.cookie = "tr_theme=" + encodeURIComponent(themeName) + "; path=/; max-age=" + (86400 * 365) + "; SameSite=Lax";
    
    // ইউআই স্টেট ও আইকন আপডেট
    updateThemeUI(themeName);
    
    // ড্রপডাউন বন্ধ করা
    closeThemeDropdown();
}

function updateThemeUI(themeName) {
    var iconEl = document.getElementById('themeBtnIcon');
    var btn = document.getElementById('themeDropdownBtn');
    
    if (iconEl) {
        if (themeName === 'dark') {
            iconEl.innerHTML = '<i class="fa-solid fa-moon" style="color: #38bdf8; font-size: 1.05rem;"></i>';
            if (btn) btn.setAttribute('title', 'বর্তমান থিম: ডার্ক (ক্লিক করে পরিবর্তন করুন)');
        } else if (themeName === 'dark-blue') {
            iconEl.innerHTML = '<i class="fa-solid fa-palette" style="color: #60a5fa; font-size: 1.05rem;"></i>';
            if (btn) btn.setAttribute('title', 'বর্তমান থিম: ডার্ক ব্লু (ক্লিক করে পরিবর্তন করুন)');
        } else {
            iconEl.innerHTML = '<i class="fa-solid fa-sun" style="color: #d97706; font-size: 1.05rem;"></i>';
            if (btn) btn.setAttribute('title', 'বর্তমান থিম: লাইট (ক্লিক করে পরিবর্তন করুন)');
        }
    }
    
    // ড্রপডাউন মেনুতে সক্রিয় টিকমার্ক ও অ্যাক্টিভ ক্লাস সিঙ্ক
    ['light', 'dark', 'dark-blue'].forEach(function(t) {
        var chk = document.getElementById('check-' + t);
        var item = document.querySelector('.theme-opt-item[data-theme="' + t + '"]');
        if (chk) chk.style.display = (t === themeName) ? 'block' : 'none';
        if (item) {
            if (t === themeName) item.classList.add('active');
            else item.classList.remove('active');
        }
    });
    
    // ফুটার থিম পিলস সিঙ্ক
    document.querySelectorAll('.theme-pill-btn').forEach(function(btn) {
        if (btn.getAttribute('data-theme') === themeName) {
            btn.classList.add('active');
        } else {
            btn.classList.remove('active');
        }
    });
}

function toggleThemeDropdown(e) {
    if (e) e.stopPropagation();
    var wrap = document.querySelector('.theme-switcher-wrapper');
    var menu = document.getElementById('themeDropdownMenu');
    if (!menu) return;
    
    if (menu.style.display === 'none' || menu.style.display === '') {
        menu.style.display = 'flex';
        if (wrap) wrap.classList.add('open');
        
        // স্ক্রিনের সাইড অনুযায়ী মেনুর পজিশন নিরাপদ রাখা (বাম বা ডানে উপচে পড়া রোধ)
        if (window.innerWidth <= 768 && wrap) {
            var rect = wrap.getBoundingClientRect();
            if (rect.right < 240) {
                menu.style.right = 'auto';
                menu.style.left = '0';
            } else {
                menu.style.left = 'auto';
                menu.style.right = '0';
            }
        }
    } else {
        closeThemeDropdown();
    }
}

function closeThemeDropdown() {
    var wrap = document.querySelector('.theme-switcher-wrapper');
    var menu = document.getElementById('themeDropdownMenu');
    if (menu) menu.style.display = 'none';
    if (wrap) wrap.classList.remove('open');
}

// বাইরে যেকোনো জায়গায় ক্লিক করলে ড্রপডাউন বন্ধ হওয়া
document.addEventListener('click', function(e) {
    var wrap = document.querySelector('.theme-switcher-wrapper');
    var menu = document.getElementById('themeDropdownMenu');
    if (menu && menu.style.display === 'flex' && wrap && !wrap.contains(e.target)) {
        closeThemeDropdown();
    }
});

// পেজ লোড সম্পন্ন হলে সক্রিয় থিম অনুযায়ী ইউআই ইনিশিয়ালাইজেশন
document.addEventListener('DOMContentLoaded', function() {
    var currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
    updateThemeUI(currentTheme);
});

</script>
</head>
<body>
<header class="site-header">
        <div class="header-container">
        <!-- ১. সেন্টারে সুন্দর ব্র্যান্ড লোগো (২০% চওড়া ও প্রমিনেন্ট) -->
        <div class="header-brand-center">
            <a href="/" class="brand-link">
                <div class="brand-mark">
                    <i class="fa-solid fa-shapes"></i>
                </div>
                <div class="brand-text-wrap">
                    <div class="brand-title">Tips<span class="brand-accent">Round</span><span class="brand-tld">.com</span></div>
                    <span class="brand-tagline">Tech Community & Rewards</span>
                </div>
            </a>
        </div>
        
        <!-- ২. নিচে সেন্টারে সাজানো ন্যাভিগেশন বার (বর্তমান পেজের সাথে সামঞ্জস্য রেখে স্বয়ংক্রিয় হাইড) -->
                <nav class="nav-menu-center">
            <!-- রেফারেল পেজে থাকলে রেফার বাটন হাইড থাকবে -->
                            <a href="/refer" class="nav-refer"><i class="fa-solid fa-gift"></i> রেফার ও আর্ন</a>
                        
                            <!-- লগইন পেজে থাকলে লগইন বাটন হাইড থাকবে -->
                                    <a href="/login"><i class="fa-solid fa-right-to-bracket"></i> লগইন</a>
                
                <!-- রেজিস্ট্রেশন পেজে থাকলে রেজিস্ট্রেশন বাটন হাইড থাকবে -->
                                    <a href="/register" class="btn-new-post"><i class="fa-solid fa-user-plus"></i> রেজিস্ট্রেশন</a>
                            
            <!-- ৩-থিম সুইচিং কন্ট্রোল (আইকন অনলি বাটন) -->
            <div class="theme-switcher-wrapper">
                <button type="button" class="nav-theme-btn" id="themeDropdownBtn" onclick="toggleThemeDropdown(event)" title="থিম পরিবর্তন করুন (Theme)">
                    <span id="themeBtnIcon">
                                                    <i class="fa-solid fa-sun" style="color: #d97706; font-size: 1.05rem;"></i>
                                            </span>
                </button>
                <div id="themeDropdownMenu" class="theme-dropdown-menu" style="display: none;">
                    <div class="theme-dropdown-title">ডিসপ্লে থিম নির্বাচন করুন</div>
                    <button type="button" class="theme-opt-item" data-theme="light" onclick="selectTheme('light')">
                        <div class="theme-opt-left">
                            <span class="theme-opt-icon" style="background:#fef3c7; color:#d97706;"><i class="fa-solid fa-sun"></i></span>
                            <div class="theme-opt-info">
                                <div class="theme-opt-name">লাইট থিম (Light)</div>
                                <div class="theme-opt-desc">স্বাভাবিক উজ্জ্বল ব্যাকগ্রাউন্ড</div>
                            </div>
                        </div>
                        <div class="theme-opt-check" id="check-light"><i class="fa-solid fa-check"></i></div>
                    </button>
                    <button type="button" class="theme-opt-item" data-theme="dark" onclick="selectTheme('dark')">
                        <div class="theme-opt-left">
                            <span class="theme-opt-icon" style="background:#1e293b; color:#38bdf8;"><i class="fa-solid fa-moon"></i></span>
                            <div class="theme-opt-info">
                                <div class="theme-opt-name">ডার্ক থিম (Dark)</div>
                                <div class="theme-opt-desc">গভীর চারকোল ও ওলেড কালো</div>
                            </div>
                        </div>
                        <div class="theme-opt-check" id="check-dark" style="display:none;"><i class="fa-solid fa-check"></i></div>
                    </button>
                    <button type="button" class="theme-opt-item" data-theme="dark-blue" onclick="selectTheme('dark-blue')">
                        <div class="theme-opt-left">
                            <span class="theme-opt-icon" style="background:#0c1a38; color:#60a5fa;"><i class="fa-solid fa-palette"></i></span>
                            <div class="theme-opt-info">
                                <div class="theme-opt-name">ডার্ক ব্লু (Dark Blue)</div>
                                <div class="theme-opt-desc">রয়্যাল মিডনাইট নেভি ব্লু</div>
                            </div>
                        </div>
                        <div class="theme-opt-check" id="check-dark-blue" style="display:none;"><i class="fa-solid fa-check"></i></div>
                    </button>
                </div>
            </div>
        </nav>
    </div>
</header>

<div class="main-wrapper">
<div class="container" style="max-width: 850px; margin: 30px auto; padding: 0 15px;">
    
    
                
    <!-- প্রোফাইল হেডার কার্ড -->
    <div style="background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); margin-bottom: 25px; text-align: center;">
        
        <!-- প্রোফাইল পিকচার ফ্রেম ও রাউন্ড প্যাড (কালার কোডেড অরা) -->
        <div style="position: relative; width: 108px; height: 108px; margin: 0 auto 16px auto; display: flex; align-items: center; justify-content: center;">
            <div style="width: 108px; height: 108px; border-radius: 50%; padding: 4px; background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 0 18px rgba(220, 38, 38, 0.40); display: flex; align-items: center; justify-content: center;">
                <div style="width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 3px solid #ffffff; background: #eff6ff; display: flex; align-items: center; justify-content: center;">
                                            <img src="uploads/profiles/profile_5_1793717430.webp" alt="Profile Picture" style="width: 100%; height: 100%; object-fit: cover;">
                                    </div>
            </div>
            <!-- রাউন্ড প্যাডের নিচের স্ট্যাটাস চিপ -->
            <span style="position: absolute; bottom: -6px; background: #dc2626; color: #ffffff; border: 2px solid #ffffff; padding: 2px 10px; border-radius: 12px; font-size: 0.68rem; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,0.18); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;">
                <i class="fa-solid fa-shield-halved"></i> অ্যাডমিন            </span>
        </div>

        <!-- প্রোফাইল পিকচারের নিচে অর্জিত সম্মানসূচক ব্যাজসমূহ (শোকেস প্যাড) -->
                            <div style="display: flex; justify-content: center; align-items: center; gap: 6px; margin: 12px 0 10px; flex-wrap: wrap;">
                                    <span title="অফিসিয়াল টিম: সাইটের নীতি ও শৃঙ্খলা রক্ষাকারী অফিসিয়াল দায়িত্বপ্রাপ্ত" style="display: inline-flex; align-items: center; gap: 4px; background: #ecfeff; border: 1px solid #0891b2; color: #0891b2; padding: 2px 9px; border-radius: 14px; font-size: 0.70rem; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.03); cursor: help;">
                        <i class="fa-solid fa-shield-halved"></i> অফিসিয়াল টিম                    </span>
                            </div>
                
        <h1 style="font-size: 1.6rem; color: var(--text-main); margin-bottom: 4px;">Muhammad Sajib</h1>
        <p style="color: var(--primary-blue); font-weight: 600; font-size: 0.95rem; margin-bottom: 10px;">@admin</p>
        
        
        <!-- ইমেল ভেরিফিকেশন স্ট্যাটাস চিপ -->
        <div style="margin-bottom: 15px;" id="profileEmailStatusChip">
                            <span style="background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; padding: 4px 12px; border-radius: 14px; font-size: 0.78rem; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.02);">
                    <i class="fa-solid fa-circle-check" style="color: #10b981;"></i> ইমেল ভেরিফাইড মেম্বার
                </span>
                    </div>

        <div style="display: flex; justify-content: center; gap: 10px; margin-bottom: 15px; flex-wrap: wrap;">
                            <a href="/messages.php?to=5" style="background: #10b981; color: white; border: none; padding: 8px 18px; border-radius: 20px; font-weight: 600; text-decoration: none; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 7px; box-shadow: 0 4px 12px rgba(16,185,129,0.25); transition: all 0.2s;">
                    <i class="fa-solid fa-comment-dots"></i> মেসেজ পাঠান
                </a>
                    </div>

        <!-- স্ট্যাটস -->
        <div style="display: flex; justify-content: center; gap: 30px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 15px 0;">
            <div>
                <span style="display: block; font-size: 1.3rem; font-weight: 700; color: #16a34a;">333</span>
                <span style="font-size: 0.8rem; color: var(--text-muted); font-weight: 600;">বর্তমান পয়েন্ট</span>
            </div>
            <div>
                <span style="display: block; font-size: 1.3rem; font-weight: 700; color: var(--primary-blue);">1</span>
                <span style="font-size: 0.8rem; color: var(--text-muted); font-weight: 600;">মোট পোস্ট</span>
            </div>
            <div>
                <span style="display: block; font-size: 0.95rem; font-weight: 600; color: var(--text-main); margin-top: 4px;">03 Nov, 2026</span>
                <span style="font-size: 0.8rem; color: var(--text-muted); font-weight: 600;">যুক্ত হয়েছেন</span>
            </div>
        </div>
    </div>

    <!-- অর্জিত সম্মানসূচক ব্যাজ ও ফোরাম অ্যাক্টিভিটি লেভেল -->
    <div style="background: var(--card-bg, #ffffff); border: 1px solid var(--border-color, #cbd5e1); border-radius: 8px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); margin-bottom: 25px;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; flex-wrap: wrap; gap: 8px;">
            <h3 style="font-size: 1.15rem; color: #1e3a8a; margin: 0; display: flex; align-items: center; gap: 8px;">
                <i class="fa-solid fa-trophy" style="color: #f59e0b;"></i> অর্জিত ব্যাজ ও ফোরাম অ্যাক্টিভিটি লেভেল
            </h3>
            <span style="background: #fef3c7; color: #92400e; border: 1px solid #fde68a; padding: 3px 10px; border-radius: 20px; font-size: 0.80rem; font-weight: 700;">
                লেভেল ১: ব্রোঞ্জ মেম্বার            </span>
        </div>

        <!-- লেভেল প্রগ্রেস বার -->
                                <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px 16px; margin-bottom: 20px;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 0.84rem;">
                    <span style="font-weight: 600; color: #334155;">
                        <i class="fa-solid fa-chart-line" style="color: var(--primary-blue);"></i> পরবর্তী লেভেল অর্জনের অগ্রগতি
                    </span>
                    <strong style="color: var(--primary-blue);">333 / 500 পয়েন্ট (67%)</strong>
                </div>
                <div style="background: #e2e8f0; border-radius: 10px; height: 10px; overflow: hidden; width: 100%;">
                    <div style="background: linear-gradient(90deg, #3b82f6, #10b981); height: 100%; width: 67%; border-radius: 10px; transition: width 0.5s ease;"></div>
                </div>
                <small style="color: var(--text-muted); font-size: 0.78rem; display: block; margin-top: 6px;">
                    💡 আরও <strong>167 পয়েন্ট</strong> অর্জন করলেই পরবর্তী সম্মানসূচক র‍্যাংক আনলক হবে!
                </small>
            </div>
        
        <!-- সম্মানসূচক অর্জন ব্যাজ গ্রিড -->
        <h4 style="font-size: 0.92rem; color: #475569; margin: 0 0 12px 0; font-weight: 700;">
            <i class="fa-solid fa-medal" style="color: #6366f1;"></i> বিশেষ সম্মানসূচক ব্যাজসমূহ
        </h4>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px;">
                            <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #cbd5e1; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; opacity: 0.75; box-shadow: none;">
                    <div style="display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px;">
                        <div style="width: 36px; height: 36px; border-radius: 8px; background: #e2e8f0; color: #94a3b8; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0;">
                            <i class="fa-solid fa-feather-pointed"></i>
                        </div>
                        <div>
                            <strong style="font-size: 0.90rem; color: #64748b; display: block;">
                                টপ রাইটার                            </strong>
                            <p style="margin: 3px 0 0; font-size: 0.76rem; color: var(--text-muted); line-height: 1.4;">
                                কমিউনিটিতে ৫টি বা তার বেশি পোস্ট প্রকাশ করেছেন                            </p>
                        </div>
                    </div>
                    
                    <div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #f1f5f9; padding-top: 6px; margin-top: 6px; font-size: 0.75rem;">
                        <span style="color: #64748b; font-weight: 600;">
                                                            <i class="fa-solid fa-lock"></i> অগ্রগতি: 1 / ৫ পোস্ট                                                    </span>
                        <span style="font-size: 0.72rem; color: var(--text-muted);">
                            লকড                        </span>
                    </div>
                </div>
                            <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #cbd5e1; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; opacity: 0.75; box-shadow: none;">
                    <div style="display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px;">
                        <div style="width: 36px; height: 36px; border-radius: 8px; background: #e2e8f0; color: #94a3b8; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0;">
                            <i class="fa-solid fa-comments"></i>
                        </div>
                        <div>
                            <strong style="font-size: 0.90rem; color: #64748b; display: block;">
                                সক্রিয় আলোচক                            </strong>
                            <p style="margin: 3px 0 0; font-size: 0.76rem; color: var(--text-muted); line-height: 1.4;">
                                পোস্টসমূহে ১০টির বেশি গঠনমূলক মন্তব্য করেছেন                            </p>
                        </div>
                    </div>
                    
                    <div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #f1f5f9; padding-top: 6px; margin-top: 6px; font-size: 0.75rem;">
                        <span style="color: #64748b; font-weight: 600;">
                                                            <i class="fa-solid fa-lock"></i> অগ্রগতি: 1 / ১০ মন্তব্য                                                    </span>
                        <span style="font-size: 0.72rem; color: var(--text-muted);">
                            লকড                        </span>
                    </div>
                </div>
                            <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #cbd5e1; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; opacity: 0.75; box-shadow: none;">
                    <div style="display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px;">
                        <div style="width: 36px; height: 36px; border-radius: 8px; background: #e2e8f0; color: #94a3b8; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0;">
                            <i class="fa-solid fa-heart"></i>
                        </div>
                        <div>
                            <strong style="font-size: 0.90rem; color: #64748b; display: block;">
                                পাঠকপ্রিয় লেখক                            </strong>
                            <p style="margin: 3px 0 0; font-size: 0.76rem; color: var(--text-muted); line-height: 1.4;">
                                নিজের পোস্টসমূহে ২০টির বেশি লাইক ভালোবাসা পেয়েছেন                            </p>
                        </div>
                    </div>
                    
                    <div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #f1f5f9; padding-top: 6px; margin-top: 6px; font-size: 0.75rem;">
                        <span style="color: #64748b; font-weight: 600;">
                                                            <i class="fa-solid fa-lock"></i> অগ্রগতি: 1 / ২০ লাইক                                                    </span>
                        <span style="font-size: 0.72rem; color: var(--text-muted);">
                            লকড                        </span>
                    </div>
                </div>
                            <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #cbd5e1; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; opacity: 0.75; box-shadow: none;">
                    <div style="display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px;">
                        <div style="width: 36px; height: 36px; border-radius: 8px; background: #e2e8f0; color: #94a3b8; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0;">
                            <i class="fa-solid fa-users"></i>
                        </div>
                        <div>
                            <strong style="font-size: 0.90rem; color: #64748b; display: block;">
                                সুপার রেফারার                            </strong>
                            <p style="margin: 3px 0 0; font-size: 0.76rem; color: var(--text-muted); line-height: 1.4;">
                                ৩ জন বা তার বেশি বন্ধুকে সফলভাবে আমন্ত্রণ জানিয়েছেন                            </p>
                        </div>
                    </div>
                    
                    <div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #f1f5f9; padding-top: 6px; margin-top: 6px; font-size: 0.75rem;">
                        <span style="color: #64748b; font-weight: 600;">
                                                            <i class="fa-solid fa-lock"></i> অগ্রগতি: 1 / ৩ রেফারেল                                                    </span>
                        <span style="font-size: 0.72rem; color: var(--text-muted);">
                            লকড                        </span>
                    </div>
                </div>
                            <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #cbd5e1; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; opacity: 0.75; box-shadow: none;">
                    <div style="display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px;">
                        <div style="width: 36px; height: 36px; border-radius: 8px; background: #e2e8f0; color: #94a3b8; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0;">
                            <i class="fa-solid fa-calendar-check"></i>
                        </div>
                        <div>
                            <strong style="font-size: 0.90rem; color: #64748b; display: block;">
                                প্রবীণ সদস্য                            </strong>
                            <p style="margin: 3px 0 0; font-size: 0.76rem; color: var(--text-muted); line-height: 1.4;">
                                ১ মাসের বেশি সময় ধরে বিশ্বস্ততার সাথে ফোরামে আছেন                            </p>
                        </div>
                    </div>
                    
                    <div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #f1f5f9; padding-top: 6px; margin-top: 6px; font-size: 0.75rem;">
                        <span style="color: #64748b; font-weight: 600;">
                                                            <i class="fa-solid fa-lock"></i> অগ্রগতি: 2 / ৩০ দিন                                                    </span>
                        <span style="font-size: 0.72rem; color: var(--text-muted);">
                            লকড                        </span>
                    </div>
                </div>
                            <div style="background: #ffffff; border: 1px solid #cbd5e1; border-left: 4px solid #0891b2; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; opacity: 1; box-shadow: 0 2px 6px rgba(0,0,0,0.03);">
                    <div style="display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px;">
                        <div style="width: 36px; height: 36px; border-radius: 8px; background: #ecfeff; color: #0891b2; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0;">
                            <i class="fa-solid fa-shield-halved"></i>
                        </div>
                        <div>
                            <strong style="font-size: 0.90rem; color: #1e293b; display: block;">
                                অফিসিয়াল টিম                            </strong>
                            <p style="margin: 3px 0 0; font-size: 0.76rem; color: var(--text-muted); line-height: 1.4;">
                                সাইটের নীতি ও শৃঙ্খলা রক্ষাকারী অফিসিয়াল দায়িত্বপ্রাপ্ত                            </p>
                        </div>
                    </div>
                    
                    <div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #e2e8f0; padding-top: 6px; margin-top: 6px; font-size: 0.75rem;">
                        <span style="color: #059669; font-weight: 600;">
                                                            <i class="fa-solid fa-circle-check"></i> অর্জিত
                                                    </span>
                        <span style="font-size: 0.72rem; color: var(--text-muted);">
                            সক্রিয় ব্যাজ                        </span>
                    </div>
                </div>
                    </div>
    </div>

    <!-- ইউজারের পোস্টসমূহ -->
    <div style="background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); margin-bottom: 25px;">
        <h3 style="font-size: 1.15rem; color: #1e3a8a; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px;">
            <i class="fa-solid fa-feather"></i> Muhammad Sajib-এর পোস্টসমূহ (1)
        </h3>

                    <div style="display: flex; flex-direction: column; gap: 15px;">
                                    <div style="background: #f8fafc; border: 1px solid var(--border-color); padding: 15px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
                        <div style="flex: 1; min-width: 250px;">
                            <span style="background: #eff6ff; color: var(--primary-blue); padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600;">
                                📱 Android Tips                            </span>
                                                        <h4 style="margin: 8px 0 5px 0; font-size: 1.05rem;">
                                <a href="/7-useful-android-hidden-features-you-must-know" style="color: var(--text-main); text-decoration: none;">
                                    অ্যান্ড্রয়েড ফোনের ৭টি দরকারি ফিচার, যা আপনার জানা জরুরি                                </a>
                            </h4>
                                                        <span style="font-size: 0.78rem; color: var(--text-muted);">
                                <i class="fa-regular fa-calendar-days"></i> 05 Nov, 2026 | <i class="fa-solid fa-eye"></i> 8 বার পঠিত
                            </span>
                        </div>
                        
                        <div style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap;">
                            <!-- স্ট্যাটাস ব্যাজ -->
                                                            <span style="background: #dcfce7; color: #166534; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600;">
                                    <i class="fa-solid fa-circle-check"></i> প্রকাশিত
                                </span>
                            
                            <a href="/7-useful-android-hidden-features-you-must-know" style="background: #eff6ff; color: var(--primary-blue); padding: 6px 12px; border-radius: 4px; text-decoration: none; font-size: 0.82rem; font-weight: 600;">
                                পড়ুন
                            </a>
                            
                                                    </div>
                    </div>
                            </div>
            </div>

    
    
</div>

<!-- প্রোফাইল এডিট মডাল -->
<div id="editModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(4px); z-index: 99999; justify-content: center; align-items: center; padding: 15px; box-sizing: border-box;">
    <div style="background: var(--card-bg); width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; padding: 25px 22px; border-radius: 12px; border: 1px solid var(--border-color); box-shadow: 0 20px 40px rgba(0,0,0,0.2); position: relative;">
        
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 12px;">
            <div style="display: flex; align-items: center; gap: 8px;">
                <span style="background: #eff6ff; color: var(--primary-blue); width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem;">
                    <i class="fa-solid fa-user-pen"></i>
                </span>
                <div>
                    <h3 style="font-size: 1.15rem; margin: 0; color: var(--text-main); font-weight: 700;">প্রোফাইল এডিট</h3>
                    <span style="font-size: 0.76rem; color: var(--text-muted);">পেন আইকনে ট্যাপ করে তথ্য এডিট করুন</span>
                </div>
            </div>
            <button type="button" onclick="closeEditModal()" style="background: #f1f5f9; border: 1px solid var(--border-color); width: 32px; height: 32px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; transition: all 0.2s;">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <form action="" method="POST" enctype="multipart/form-data" id="editProfileForm">
            <input type="hidden" name="csrf_token" value="dbd915ffd4fc8d463bdf8d60b8952976cef23832d92b1f0905c6e95714841d04">            
            <!-- প্রোফাইল ছবি ও ইন্টারেক্টিভ রিসাইজ/ক্রপার -->
            <div style="text-align: center; margin-bottom: 22px;">
                <div style="position: relative; width: 100px; height: 100px; margin: 0 auto; border-radius: 50%; border: 3px solid #bfdbfe; background: #eff6ff; display: flex; align-items: center; justify-content: center;">
                    <img id="editAvatarPreview" src="uploads/profiles/profile_5_1793717430.webp" alt="Avatar" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%; ">
                    <i id="editAvatarPlaceholder" class="fa-solid fa-user-astronaut" style="font-size: 2.8rem; color: var(--primary-blue); display:none;"></i>
                    
                    <label for="profilePicInput" title="ছবি নির্বাচন বা পরিবর্তন করুন" style="position: absolute; bottom: 0; right: 0; background: var(--primary-blue); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid white; box-shadow: 0 2px 6px rgba(0,0,0,0.2);">
                        <i class="fa-solid fa-camera" style="font-size: 0.85rem;"></i>
                    </label>
                    <input type="file" name="profile_pic" id="profilePicInput" accept="image/png, image/jpeg, image/jpg, image/webp" onchange="handleAvatarFileSelect(this)" style="display: none;">
                </div>
                <div style="margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 5px;">
                    <div style="display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;">
                        <label for="profilePicInput" style="font-size: 0.82rem; color: #ffffff; background: var(--primary-blue); padding: 5px 12px; border-radius: 20px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;">
                            <i class="fa-solid fa-upload" style="font-size: 0.75rem;"></i> ছবি নির্বাচন করুন
                        </label>
                        <button type="button" id="reCropBtn" onclick="reopenAvatarCropper()" style="display: none; font-size: 0.82rem; color: #1e40af; background: #eff6ff; border: 1px solid #bfdbfe; padding: 5px 12px; border-radius: 20px; font-weight: 600; cursor: pointer; align-items: center; gap: 5px;">
                            <i class="fa-solid fa-crop-simple"></i> পুনরায় রিসাইজ / ক্রপ
                        </button>
                    </div>
                    <div id="avatarCompMsg" style="font-size: 0.74rem; color: #059669; margin-top: 2px; font-weight: 600;">(জুম, রিসাইজ ও রাউন্ড শেপ ক্রপার চালু)</div>
                </div>
            </div>

            <!-- ফিল্ড লিস্ট -->
            <div style="display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px;">
                <div style="background: #f8fafc; border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 14px;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div style="flex: 1; min-width: 0;">
                            <span style="display: block; font-size: 0.75rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase;">নাম</span>
                            <span id="nameDisplayVal" style="font-size: 0.95rem; font-weight: 600; color: var(--text-main); word-break: break-word;">Muhammad Sajib</span>
                        </div>
                        <button type="button" onclick="toggleEditRow('nameRow', 'nameInput')" title="নাম এডিট করুন" style="background: white; border: 1px solid #bfdbfe; color: var(--primary-blue); width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer;">
                            <i class="fa-solid fa-pen" style="font-size: 0.85rem;"></i>
                        </button>
                    </div>
                    <div id="nameRow" style="margin-top: 10px; display: none;">
                        <input type="text" name="name" id="nameInput" value="Muhammad Sajib" required placeholder="আপনার পুরো নাম লিখুন" oninput="document.getElementById('nameDisplayVal').innerText = this.value || '(খালি)';" style="width: 100%; padding: 8px 10px; border: 1px solid var(--primary-blue); border-radius: 6px; font-size: 0.9rem; outline: none; background: white; box-sizing: border-box;">
                    </div>
                </div>

                <div style="background: #f8fafc; border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 14px;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div style="flex: 1; min-width: 0;">
                            <span style="display: block; font-size: 0.75rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase;">মোবাইল নাম্বার</span>
                            <span id="phoneDisplayVal" style="font-size: 0.95rem; font-weight: 600; color: var(--text-main); word-break: break-word;">
                                01967170680                            </span>
                        </div>
                        <button type="button" onclick="toggleEditRow('phoneRow', 'phoneInput')" title="নাম্বার এডিট করুন" style="background: white; border: 1px solid #bfdbfe; color: var(--primary-blue); width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer;">
                            <i class="fa-solid fa-pen" style="font-size: 0.85rem;"></i>
                        </button>
                    </div>
                    <div id="phoneRow" style="margin-top: 10px; display: none;">
                        <input type="text" name="phone" id="phoneInput" value="01967170680" placeholder="যেমন: 01700000000" oninput="document.getElementById('phoneDisplayVal').innerText = this.value || 'যোগ করা হয়নি';" style="width: 100%; padding: 8px 10px; border: 1px solid var(--primary-blue); border-radius: 6px; font-size: 0.9rem; outline: none; background: white; box-sizing: border-box;">
                    </div>
                </div>

                <div style="background: #f8fafc; border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 14px;" id="emailVerifyModule">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div style="flex: 1; min-width: 0;">
                            <span style="display: block; font-size: 0.75rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase;">ইমেল অ্যাড্রেস ও ভেরিফিকেশন</span>
                            <div style="display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap;">
                                <span style="font-size: 0.95rem; font-weight: 600; color: var(--text-main); word-break: break-all;">sajib7095@yahoo.com</span>
                                <span id="emailVerifyBadgeContainer">
                                                                            <span style="background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; padding: 2px 8px; border-radius: 10px; font-size: 0.72rem; font-weight: 700; display: inline-flex; align-items: center; gap: 4px;">
                                            <i class="fa-solid fa-circle-check"></i> ভেরিফাইড
                                        </span>
                                                                    </span>
                            </div>
                        </div>
                                            </div>

                                    </div>

                <div style="background: #f8fafc; border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 14px;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div style="flex: 1; min-width: 0;">
                            <span style="display: block; font-size: 0.75rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase;">পাসওয়ার্ড</span>
                            <span style="font-size: 0.95rem; font-weight: 700; color: var(--text-muted); letter-spacing: 2px;">••••••••••••</span>
                        </div>
                        <button type="button" onclick="togglePasswordSection()" title="পাসওয়ার্ড পরিবর্তন করুন" style="background: white; border: 1px solid #bfdbfe; color: var(--primary-blue); width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer;">
                            <i class="fa-solid fa-pen" style="font-size: 0.85rem;"></i>
                        </button>
                    </div>

                    <div id="passwordDrawer" style="margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-color); display: none;">
                        <div style="background: #eff6ff; border-left: 3px solid var(--primary-blue); padding: 7px 10px; border-radius: 4px; font-size: 0.76rem; color: #1e40af; margin-bottom: 12px;">
                            <i class="fa-solid fa-shield-halved"></i> পাসওয়ার্ড পরিবর্তন করতে চাইলে নিচের তিনটি ঘর পূরণ করুন (অন্যথায় খালি রাখুন)।
                        </div>

                        <div style="margin-bottom: 10px;">
                            <label style="font-size: 0.78rem; font-weight: 600; color: var(--text-main); display: block; margin-bottom: 4px;">বর্তমান পাসওয়ার্ড:</label>
                            <div style="position: relative;">
                                <input type="password" name="current_password" id="currPassInput" placeholder="••••••••" style="width: 100%; padding: 8px 36px 8px 10px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.88rem; outline: none; background: white; box-sizing: border-box;">
                                <i class="fa-solid fa-eye" onclick="togglePassView('currPassInput', this)" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); cursor: pointer; font-size: 0.85rem;"></i>
                            </div>
                        </div>

                        <div style="margin-bottom: 10px;">
                            <label style="font-size: 0.78rem; font-weight: 600; color: var(--text-main); display: block; margin-bottom: 4px;">নতুন পাসওয়ার্ড (কমপক্ষে ৬ অক্ষর):</label>
                            <div style="position: relative;">
                                <input type="password" name="new_password" id="newPassInput" placeholder="কমপক্ষে ৬ অক্ষরের নতুন পাসওয়ার্ড" style="width: 100%; padding: 8px 36px 8px 10px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.88rem; outline: none; background: white; box-sizing: border-box;">
                                <i class="fa-solid fa-eye" onclick="togglePassView('newPassInput', this)" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); cursor: pointer; font-size: 0.85rem;"></i>
                            </div>
                        </div>

                        <div style="margin-bottom: 4px;">
                            <label style="font-size: 0.78rem; font-weight: 600; color: var(--text-main); display: block; margin-bottom: 4px;">নতুন পাসওয়ার্ড নিশ্চিত করুন:</label>
                            <div style="position: relative;">
                                <input type="password" name="confirm_password" id="confPassInput" placeholder="নতুন পাসওয়ার্ড পুনরায় লিখুন" style="width: 100%; padding: 8px 36px 8px 10px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.88rem; outline: none; background: white; box-sizing: border-box;">
                                <i class="fa-solid fa-eye" onclick="togglePassView('confPassInput', this)" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); cursor: pointer; font-size: 0.85rem;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div style="display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--border-color); padding-top: 15px;">
                <button type="button" onclick="closeEditModal()" style="padding: 9px 16px; background: #f1f5f9; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--text-muted);">
                    বাতিল
                </button>
                <button type="submit" name="update_profile" style="padding: 9px 20px; background: var(--primary-blue); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.88rem; font-weight: 600; display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 10px rgba(37,99,235,0.25);">
                    <i class="fa-solid fa-check"></i> পরিবর্তন সংরক্ষণ করুন
                </button>
            </div>
        </form>
    </div>
</div>

<!-- উইথড্র পপ-আপ মডাল -->
<div id="withdrawModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; justify-content: center; align-items: center; padding: 15px;">
    <div style="background: var(--card-bg); width: 100%; max-width: 420px; padding: 25px; border-radius: 10px; border: 1px solid var(--border-color);">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
            <h3 style="font-size: 1.1rem; margin: 0;"><i class="fa-solid fa-wallet" style="color: #16a34a;"></i> উইথড্র রিকোয়েস্ট</h3>
            <button onclick="closeWithdrawModal()" style="background:none; border:none; font-size:1.2rem; cursor:pointer;">&times;</button>
        </div>
        <p style="font-size: 0.82rem; color: var(--text-muted); margin-bottom: 15px; background: #f8fafc; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border-color);">
            বর্তমান রেট: <strong>100</strong> পয়েন্ট = <strong>1</strong> টাকা
        </p>
        
        <form action="" method="POST">
            <input type="hidden" name="csrf_token" value="dbd915ffd4fc8d463bdf8d60b8952976cef23832d92b1f0905c6e95714841d04">            <div style="margin-bottom: 12px;">
                <label style="font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 4px;">পেমেন্ট মেথড:</label>
                <select name="payment_method" style="width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 6px;">
                    <option value="Mobile Recharge">মোবাইল রিচার্জ (Mobile Recharge)</option>
                    <option value="bKash">বিকাশ (bKash Personal)</option>
                    <option value="Nagad">নগদ (Nagad Personal)</option>
                    <option value="Rocket">রকেট (Rocket Personal)</option>
                </select>
            </div>

            <div style="margin-bottom: 12px;">
                <label style="font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 4px;">নাম্বার টাইপ:</label>
                <select name="number_type" id="numberTypeSelect" onchange="handleNumberTypeChange()" style="width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 6px;">
                    <option value="default">রেজিস্টার্ড নাম্বার (01967170680)</option>
                    <option value="custom">অন্যান্য নাম্বার (কাস্টম)</option>
                </select>
            </div>

            <input type="hidden" name="default_phone" value="01967170680">

            <div id="customNumberDiv" style="margin-bottom: 12px; display: none;">
                <label style="font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 4px;">মোবাইল নাম্বার:</label>
                <input type="text" name="custom_phone" placeholder="যেমন: 01700000000" style="width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 6px;">
            </div>

            <div style="margin-bottom: 15px;">
                <label style="font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 4px;">টাকার পরিমাণ (BDT):</label>
                <input type="number" name="withdraw_amount" id="withdraw_amount_input" oninput="calculatePoints()" placeholder="যেমন: 50" min="10" required style="width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 6px;">
                <small id="calc_text" style="display: block; margin-top: 4px; color: var(--primary-blue); font-size: 0.80rem; font-weight: 600;"></small>
            </div>

            <div style="display: flex; justify-content: flex-end; gap: 10px;">
                <button type="button" onclick="closeWithdrawModal()" style="padding: 7px 12px; background: #f1f5f9; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer;">বাতিল</button>
                <button type="submit" name="request_withdraw" style="padding: 7px 15px; background: #16a34a; color: white; border: none; border-radius: 6px; cursor: pointer;">রিকোয়েস্ট পাঠান</button>
            </div>
        </form>
    </div>
</div>

<!-- ইন্টারেক্টিভ প্রোফাইল পিকচার রিসাইজ ও রাউন্ড ক্রপ মডাল -->
<div id="avatarCropperModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.80); backdrop-filter: blur(5px); z-index: 100000; justify-content: center; align-items: center; padding: 15px; box-sizing: border-box;">
    <div style="background: #ffffff; width: 100%; max-width: 440px; border-radius: 12px; border: 1px solid #cbd5e1; box-shadow: 0 25px 50px rgba(0,0,0,0.3); overflow: hidden; display: flex; flex-direction: column;">
        
        <!-- মডাল হেডার -->
        <div style="padding: 16px 20px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;">
            <div style="display: flex; align-items: center; gap: 8px;">
                <span style="background: #eff6ff; color: #2563eb; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.95rem;">
                    <i class="fa-solid fa-crop-simple"></i>
                </span>
                <div>
                    <h3 style="margin: 0; font-size: 1.05rem; color: #1e293b; font-weight: 700;">ছবি রিসাইজ ও ক্রপ করুন</h3>
                    <small style="color: #64748b; font-size: 0.74rem;">ছবিটি টেনে সরান এবং জুম বাটনে রাউন্ড ফিট করুন</small>
                </div>
            </div>
            <button type="button" onclick="closeAvatarCropperModal()" style="background: #ffffff; border: 1px solid #cbd5e1; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; color: #64748b; display: flex; align-items: center; justify-content: center;">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <!-- ক্যানভাস ভিউপোর্ট (রাউন্ড মাস্ক সহ) -->
        <div style="padding: 18px 20px 10px; display: flex; flex-direction: column; align-items: center; background: #0f172a;">
            <div style="position: relative; width: 280px; height: 280px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 10px rgba(0,0,0,0.5);">
                <canvas id="cropCanvas" width="280" height="280" style="cursor: grab; display: block; touch-action: none;"></canvas>
            </div>
            <small style="color: #94a3b8; font-size: 0.72rem; margin-top: 8px; display: flex; align-items: center; gap: 5px;">
                <i class="fa-solid fa-arrows-up-down-left-right"></i> মাউস বা আঙুল দিয়ে টেনে ছবিটি পছন্দের স্থানে বসান
            </small>
        </div>

        <!-- কন্ট্রোল টুলবার (জুম ইন, জুম আউট, রাউন্ড ফিট ও রোটেশন) -->
        <div style="padding: 14px 20px; background: #ffffff; border-top: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 10px;">
            
            <!-- জুম কন্ট্রোল বার -->
            <div style="display: flex; align-items: center; gap: 10px;">
                <button type="button" onclick="cropZoom(-0.15)" title="জুম আউট / ছোট করুন (-)" style="background: #f1f5f9; border: 1px solid #cbd5e1; color: #334155; width: 34px; height: 34px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0;">
                    <i class="fa-solid fa-minus"></i>
                </button>
                
                <input type="range" id="cropZoomRange" min="0.2" max="3.5" step="0.05" value="1" oninput="cropSetZoom(parseFloat(this.value))" style="flex: 1; cursor: pointer; accent-color: #2563eb;">
                
                <button type="button" onclick="cropZoom(0.15)" title="জুম ইন / বড় করুন (+)" style="background: #f1f5f9; border: 1px solid #cbd5e1; color: #334155; width: 34px; height: 34px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0;">
                    <i class="fa-solid fa-plus"></i>
                </button>
            </div>

            <!-- কুইক অ্যাকশন বাটনসমূহ (রাউন্ড ফিট ও রোটেট) -->
            <div style="display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;">
                <button type="button" onclick="cropFitToCircle()" title="রাউন্ড শেপের সাথে ছবিটিকে নিখুঁতভাবে ফিট করুন" style="background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; padding: 6px 14px; border-radius: 6px; font-size: 0.80rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;">
                    <i class="fa-solid fa-arrows-to-circle"></i> রাউন্ড শেপে ফিট
                </button>
                <button type="button" onclick="cropRotateRight()" title="ছবিটি ৯০ ডিগ্রি ডানে ঘোরান" style="background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; padding: 6px 14px; border-radius: 6px; font-size: 0.80rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;">
                    <i class="fa-solid fa-rotate-right"></i> ঘোরান (Rotate)
                </button>
            </div>
        </div>

        <!-- মডাল ফুটার বাটন -->
        <div style="padding: 12px 20px 16px; background: #f8fafc; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; gap: 10px;">
            <button type="button" onclick="closeAvatarCropperModal()" style="background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; padding: 9px 16px; border-radius: 6px; font-size: 0.86rem; font-weight: 600; cursor: pointer;">
                বাতিল
            </button>
            <button type="button" onclick="applyAvatarCrop()" id="cropApplyBtn" style="background: #10b981; color: #ffffff; border: none; padding: 9px 20px; border-radius: 6px; font-size: 0.86rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 12px rgba(16,185,129,0.3);">
                <i class="fa-solid fa-check"></i> ক্রপ ও ফিট সম্পন্ন
            </button>
        </div>

    </div>
</div>

<script>
function openEditModal() {
    document.getElementById('editModal').style.display = 'flex';
}
function closeEditModal() {
    document.getElementById('editModal').style.display = 'none';
}
function toggleEditRow(rowId, inputId) {
    let row = document.getElementById(rowId);
    if (row.style.display === 'none' || row.style.display === '') {
        row.style.display = 'block';
        if (inputId) {
            let inp = document.getElementById(inputId);
            inp.focus();
            inp.select();
        }
    } else {
        row.style.display = 'none';
    }
}
function togglePasswordSection() {
    let drawer = document.getElementById('passwordDrawer');
    if (drawer.style.display === 'none' || drawer.style.display === '') {
        drawer.style.display = 'block';
        document.getElementById('currPassInput').focus();
    } else {
        drawer.style.display = 'none';
    }
}
function togglePassView(inputId, iconElem) {
    let inp = document.getElementById(inputId);
    if (inp.type === 'password') {
        inp.type = 'text';
        iconElem.classList.remove('fa-eye');
        iconElem.classList.add('fa-eye-slash');
    } else {
        inp.type = 'password';
        iconElem.classList.remove('fa-eye-slash');
        iconElem.classList.add('fa-eye');
    }
}

function openWithdrawModal() { document.getElementById('withdrawModal').style.display = 'flex'; }
function closeWithdrawModal() { document.getElementById('withdrawModal').style.display = 'none'; }

function toggleMultiFilterDrawer() {
    let d = document.getElementById('multiFilterDrawer');
    if (!d) return;
    d.style.display = (d.style.display === 'none' || d.style.display === '') ? 'block' : 'none';
}

function applyMultiFilter(e) {
    if (e) e.preventDefault();
    let selected = [];
    document.querySelectorAll('.multi-filter-cb:checked').forEach(function(cb) {
        selected.push(cb.value);
    });
    let filterStr = selected.join(',');
    let userId = 5;
    if (filterStr) {
        window.location.href = 'profile.php?id=' + userId + '&pts_filter=' + encodeURIComponent(filterStr) + '#pointsActivitySection';
    } else {
        window.location.href = 'profile.php?id=' + userId + '#pointsActivitySection';
    }
}

function togglePointsActivity() {
    let content = document.getElementById('pointsActivityContent');
    let icon = document.getElementById('activityIcon');
    if (content.style.display === 'none') {
        content.style.display = 'block';
        icon.style.transform = 'rotate(180deg)';
    } else {
        content.style.display = 'none';
        icon.style.transform = 'rotate(0deg)';
    }
}

function handleNumberTypeChange() {
    let selectVal = document.getElementById('numberTypeSelect').value;
    let customDiv = document.getElementById('customNumberDiv');
    if (selectVal === 'custom') {
        customDiv.style.display = 'block';
    } else {
        customDiv.style.display = 'none';
    }
}

function calculatePoints() {
    let amount = parseFloat(document.getElementById('withdraw_amount_input').value) || 0;
    let ptsRate = 100;
    let valRate = 1;
    if (amount > 0 && valRate > 0) {
        let reqPoints = Math.ceil((amount / valRate) * ptsRate);
        document.getElementById('calc_text').innerText = 'প্রয়োজনীয় পয়েন্ট: ' + reqPoints + ' pts';
    } else {
        document.getElementById('calc_text').innerText = '';
    }
}


// ==========================================
// ইন্টারেক্টিভ প্রোফাইল পিকচার রিসাইজ ও ক্রপার ইঞ্জিন
// ==========================================
let cropImg = new Image();
let cropCanvas = null;
let cropCtx = null;
let cropScale = 1.0;
let cropPosX = 0;
let cropPosY = 0;
let cropRotation = 0;
let isCropDragging = false;
let dragStartX = 0;
let dragStartY = 0;
const cropRadius = 120; // 240px circular crop mask
let originalAvatarFile = null;

function handleAvatarFileSelect(input) {
    if (input.files && input.files[0]) {
        originalAvatarFile = input.files[0];
        const reader = new FileReader();
        reader.onload = function(e) {
            cropImg = new Image();
            cropImg.onload = function() {
                openAvatarCropperModal();
            };
            cropImg.src = e.target.result;
        };
        reader.readAsDataURL(originalAvatarFile);
    }
}

function openAvatarCropperModal() {
    const modal = document.getElementById('avatarCropperModal');
    if (!modal) return;
    modal.style.display = 'flex';

    cropCanvas = document.getElementById('cropCanvas');
    cropCtx = cropCanvas.getContext('2d');

    // রাউন্ড শেপে প্রাথমিক অপ্টিমাইজড ফিট
    cropFitToCircle();

    // ইভেন্ট লিসেনার ইনিশিয়ালাইজেশন
    initCropperEvents();
}

function closeAvatarCropperModal() {
    const modal = document.getElementById('avatarCropperModal');
    if (modal) modal.style.display = 'none';
}

function reopenAvatarCropper() {
    if (cropImg && cropImg.src) {
        document.getElementById('avatarCropperModal').style.display = 'flex';
        renderCropCanvas();
    }
}

function renderCropCanvas() {
    if (!cropCtx || !cropImg.complete) return;
    const w = cropCanvas.width;
    const h = cropCanvas.height;

    cropCtx.save();
    cropCtx.clearRect(0, 0, w, h);

    // ১. ইমেজ ড্র ও ট্রান্সফর্মেশন
    cropCtx.save();
    cropCtx.translate(w / 2 + cropPosX, h / 2 + cropPosY);
    cropCtx.rotate((cropRotation * Math.PI) / 180);
    cropCtx.scale(cropScale, cropScale);
    cropCtx.drawImage(cropImg, -cropImg.width / 2, -cropImg.height / 2);
    cropCtx.restore();

    // ২. বাইরের অংশে ডার্ক ওভারলে মাস্ক
    cropCtx.fillStyle = 'rgba(15, 23, 42, 0.65)';
    cropCtx.fillRect(0, 0, w, h);

    // ৩. মাঝের রাউন্ড শেপটি ট্রান্সপারেন্ট কাট-আউট
    cropCtx.globalCompositeOperation = 'destination-out';
    cropCtx.beginPath();
    cropCtx.arc(w / 2, h / 2, cropRadius, 0, Math.PI * 2, false);
    cropCtx.fill();
    cropCtx.globalCompositeOperation = 'source-over';

    // ৪. রাউন্ড শেপের চমৎকার গাইড বর্ডার
    cropCtx.strokeStyle = '#38bdf8';
    cropCtx.lineWidth = 2.5;
    cropCtx.beginPath();
    cropCtx.arc(w / 2, h / 2, cropRadius, 0, Math.PI * 2, false);
    cropCtx.stroke();

    cropCtx.restore();
}

function cropFitToCircle() {
    if (!cropImg.width || !cropImg.height) return;
    // রাউন্ড শেপের ডায়ামিটার ২৪০px
    const diameter = cropRadius * 2;
    // ছবির ক্ষুদ্রতর বাহুটিকে রাউন্ড শেপের সাথে ফিট করা
    cropScale = Math.max(diameter / cropImg.width, diameter / cropImg.height);
    cropPosX = 0;
    cropPosY = 0;
    cropRotation = 0;

    const range = document.getElementById('cropZoomRange');
    if (range) {
        range.value = cropScale.toFixed(2);
    }
    renderCropCanvas();
}

function cropSetZoom(val) {
    cropScale = Math.max(0.2, Math.min(3.5, val));
    const range = document.getElementById('cropZoomRange');
    if (range) range.value = cropScale;
    renderCropCanvas();
}

function cropZoom(delta) {
    cropSetZoom(cropScale + delta);
}

function cropRotateRight() {
    cropRotation = (cropRotation + 90) % 360;
    renderCropCanvas();
}

function initCropperEvents() {
    if (!cropCanvas) return;

    // মাউস ড্র্যাগ ইভেন্টসমূহ
    cropCanvas.onmousedown = function(e) {
        isCropDragging = true;
        dragStartX = e.clientX - cropPosX;
        dragStartY = e.clientY - cropPosY;
        cropCanvas.style.cursor = 'grabbing';
    };

    window.onmousemove = function(e) {
        if (!isCropDragging) return;
        cropPosX = e.clientX - dragStartX;
        cropPosY = e.clientY - dragStartY;
        renderCropCanvas();
    };

    window.onmouseup = function() {
        if (isCropDragging) {
            isCropDragging = false;
            if (cropCanvas) cropCanvas.style.cursor = 'grab';
        }
    };

    // মোবাইল টাচ ইভেন্টসমূহ
    cropCanvas.ontouchstart = function(e) {
        if (e.touches.length === 1) {
            isCropDragging = true;
            dragStartX = e.touches[0].clientX - cropPosX;
            dragStartY = e.touches[0].clientY - cropPosY;
        }
    };

    cropCanvas.ontouchmove = function(e) {
        if (isCropDragging && e.touches.length === 1) {
            e.preventDefault();
            cropPosX = e.touches[0].clientX - dragStartX;
            cropPosY = e.touches[0].clientY - dragStartY;
            renderCropCanvas();
        }
    };

    cropCanvas.ontouchend = function() {
        isCropDragging = false;
    };

    // মাউস স্ক্রোল দিয়ে জুম ইন / জুম আউট
    cropCanvas.onwheel = function(e) {
        e.preventDefault();
        const delta = e.deltaY < 0 ? 0.08 : -0.08;
        cropZoom(delta);
    };
}

async function applyAvatarCrop() {
    const btn = document.getElementById('cropApplyBtn');
    if (btn) btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> প্রসেসিং...';

    // আউটপুট ক্যানভাস তৈরি (উচ্চ রেজুলেশন ৫০০x৫০০)
    const outCanvas = document.createElement('canvas');
    const outSize = 500;
    outCanvas.width = outSize;
    outCanvas.height = outSize;
    const outCtx = outCanvas.getContext('2d');

    // রাউন্ড ক্রপিং পাথ মাস্ক
    outCtx.save();
    outCtx.beginPath();
    outCtx.arc(outSize / 2, outSize / 2, outSize / 2, 0, Math.PI * 2, false);
    outCtx.clip();

    // ক্রপ ভিউপোর্ট থেকে স্কেল রেশিও হিসাব
    const scaleFactor = outSize / (cropRadius * 2);
    outCtx.translate(outSize / 2 + (cropPosX * scaleFactor), outSize / 2 + (cropPosY * scaleFactor));
    outCtx.rotate((cropRotation * Math.PI) / 180);
    outCtx.scale(cropScale * scaleFactor, cropScale * scaleFactor);
    outCtx.drawImage(cropImg, -cropImg.width / 2, -cropImg.height / 2);
    outCtx.restore();

    // কম্প্রেস করে ১০০ KB-এর নিচে নামিয়ে আনা
    let quality = 0.88;
    const targetMaxBytes = 100 * 1024;

    function getBlobPromise(q) {
        return new Promise(resolve => outCanvas.toBlob(resolve, 'image/webp', q));
    }

    let blob = await getBlobPromise(quality);
    while (blob && blob.size > targetMaxBytes && quality > 0.30) {
        quality -= 0.10;
        blob = await getBlobPromise(quality);
    }

    if (!blob) {
        alert("ছবি প্রসেস করতে সমস্যা হয়েছে!");
        if (btn) btn.innerHTML = '<i class="fa-solid fa-check"></i> ক্রপ ও ফিট সম্পন্ন';
        return;
    }

    const croppedFile = new File([blob], "profile_" + Date.now() + ".webp", {
        type: "image/webp",
        lastModified: Date.now()
    });

    // ইনপুটে নতুন ক্রপ করা ফাইল সেট করা
    const fileInput = document.getElementById('profilePicInput');
    const dt = new DataTransfer();
    dt.items.add(croppedFile);
    fileInput.files = dt.files;

    // এডিট মডালের প্রিভিউ ইমেজ আপডেট
    const previewImg = document.getElementById('editAvatarPreview');
    const placeholderIcon = document.getElementById('editAvatarPlaceholder');
    const msgElem = document.getElementById('avatarCompMsg');
    const reCropBtn = document.getElementById('reCropBtn');

    if (previewImg) {
        previewImg.src = URL.createObjectURL(croppedFile);
        previewImg.style.display = 'block';
    }
    if (placeholderIcon) placeholderIcon.style.display = 'none';

    if (msgElem) {
        msgElem.style.color = '#059669';
        msgElem.textContent = `✅ ছবি নিখুঁতভাবে ক্রপ ও ফিট সম্পন্ন (${(croppedFile.size / 1024).toFixed(1)} KB)`;
    }
    if (reCropBtn) reCropBtn.style.display = 'inline-flex';

    closeAvatarCropperModal();
    if (btn) btn.innerHTML = '<i class="fa-solid fa-check"></i> ক্রপ ও ফিট সম্পন্ন';
}
</script>

</div><!-- .main-wrapper শেষ -->

<footer class="site-footer" style="background: var(--card-bg, #ffffff); border-top: 1px solid var(--border-color, #cbd5e1); color: var(--text-muted, #64748b); font-size: 0.88rem; margin-top: auto; padding: 40px 20px 25px 20px;">
    <div style="max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; margin-bottom: 30px;">
        
        <!-- ব্র্যান্ড পরিচিতি -->
        <div>
            <div style="font-size: 1.3rem; font-weight: 800; color: var(--text-main, #1e293b); margin-bottom: 8px;">
                <i class="fa-solid fa-network-wired" style="color: var(--primary-blue, #2563eb);"></i> Tips<span style="color: var(--primary-blue, #2563eb);">Round</span>.com
            </div>
            <p style="font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; margin: 0 0 12px 0;">
                প্রযুক্তি, অ্যান্ড্রয়েড ট্রিকস, কম্পিউটার ও প্রোগ্রামিং টিউটোরিয়াল শেয়ারিংয়ের একটি উন্মুক্ত ও বিশ্বস্ত বাংলা কমিউনিটি প্ল্যাটফর্ম।
            </p>
            <a href="https://www.facebook.com/TipsRound.Com.bd/" target="_blank" rel="noopener noreferrer" style="color: #1877f2; text-decoration: none; font-size: 0.84rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;">
                <i class="fa-brands fa-facebook"></i> অফিসিয়াল ফেসবুক পেজ
            </a>
        </div>

        <!-- নেভিগেশন ও কমিউনিটি -->
        <div>
            <h4 style="font-size: 0.92rem; font-weight: 700; color: var(--text-main, #1e293b); margin: 0 0 12px 0; text-transform: uppercase; letter-spacing: 0.5px;">কমিউনিটি ও লিংকস</h4>
            <div style="display: flex; flex-direction: column; gap: 8px; font-size: 0.84rem;">
                <a href="/" style="color: var(--text-muted); text-decoration: none;"><i class="fa-solid fa-house"></i> হোমপেজ</a>
                <a href="/refer" style="color: #059669; text-decoration: none; font-weight: 600;"><i class="fa-solid fa-gift"></i> রেফারেল ও আর্নিং</a>
                <a href="/feedback" style="color: var(--text-muted); text-decoration: none;"><i class="fa-solid fa-comments"></i> ফিডব্যাক ও আলোচনা</a>
                                    <a href="/login" style="color: var(--text-muted); text-decoration: none;"><i class="fa-solid fa-right-to-bracket"></i> লগইন</a>
                    <a href="/register" style="color: var(--primary-blue); text-decoration: none; font-weight: 600;"><i class="fa-solid fa-user-plus"></i> ফ্রি রেজিস্ট্রেশন</a>
                            </div>
        </div>

        <!-- আইনি ও পলিসি পেজসমূহ (গুগল ও অ্যাডসেন্স রিকোয়ারমেন্ট) -->
        <div>
            <h4 style="font-size: 0.92rem; font-weight: 700; color: var(--text-main, #1e293b); margin: 0 0 12px 0; text-transform: uppercase; letter-spacing: 0.5px;">গুরুত্বপূর্ণ নীতিমালা</h4>
            <div style="display: flex; flex-direction: column; gap: 8px; font-size: 0.84rem;">
                <a href="/about" style="color: var(--text-muted); text-decoration: none;"><i class="fa-solid fa-circle-info"></i> আমাদের সম্পর্কে (About Us)</a>
                <a href="/privacy-policy" style="color: var(--text-muted); text-decoration: none;"><i class="fa-solid fa-user-shield"></i> গোপনীয়তা নীতি (Privacy Policy)</a>
                <a href="/terms" style="color: var(--text-muted); text-decoration: none;"><i class="fa-solid fa-file-contract"></i> নিয়ম ও শর্তাবলী (Terms)</a>
                <a href="/disclaimer" style="color: var(--text-muted); text-decoration: none;"><i class="fa-solid fa-triangle-exclamation"></i> দাবিত্যাগ (Disclaimer)</a>
                <a href="/contact" style="color: var(--primary-blue); text-decoration: none; font-weight: 600;"><i class="fa-solid fa-envelope"></i> যোগাযোগ করুন (Contact Us)</a>
            </div>
        </div>

    </div>

    <div style="max-width: 1100px; margin: 0 auto; padding-top: 20px; border-top: 1px solid var(--border-color, #cbd5e1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;">
        <div style="display: flex; align-items: center; gap: 10px; font-size: 0.82rem; flex-wrap: wrap;">
            <span style="color: var(--text-muted); font-weight: 600;"><i class="fa-solid fa-palette" style="color: var(--primary-blue);"></i> ডিসপ্লে থিম:</span>
            <div class="footer-theme-pills">
                <button type="button" class="theme-pill-btn" data-theme="light" onclick="selectTheme('light')"><i class="fa-solid fa-sun" style="color:#d97706;"></i> লাইট</button>
                <button type="button" class="theme-pill-btn" data-theme="dark" onclick="selectTheme('dark')"><i class="fa-solid fa-moon" style="color:#38bdf8;"></i> ডার্ক</button>
                <button type="button" class="theme-pill-btn" data-theme="dark-blue" onclick="selectTheme('dark-blue')"><i class="fa-solid fa-palette" style="color:#60a5fa;"></i> ডার্ক ব্লু</button>
            </div>
        </div>
        <div style="font-size: 0.80rem; color: var(--text-muted);">
            &copy; 2026 <a href="/" style="color: var(--text-main); font-weight: 600; text-decoration: none;">TipsRound.Com</a> — সর্বস্বত্ব সংরক্ষিত।
        </div>
    </div>
</footer>

</body>
</html>