اريد واجهه بنفس هذا التصميم 
<?php

include 'generate_cards_function.php';

// معالجة إضافة/تعديل الباقات
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['save_package'])) {
        $package_data = [
            'name' => $_POST['package_name'],
            'data_limit' => $_POST['cards_data_limit'],
            'data_unit' => $_POST['cards_data_unit'],
            'time_limit' => $_POST['cards_time_limit'],
            'time_hours' => $_POST['cards_time_limit_hours'],
            'profile' => $_POST['user_profile'],
            'password_option' => $_POST['password_option'],
            'restrict' => $_POST['email_restrict'],
            'card_prefix' => $_POST['card_prefix'],
            'quantity' => $_POST['quantity'],
            'text_size' => $_POST['text_size'],
            'card_type' => $_POST['card_type'],
            'cards_comment' => $_POST['cards_comment']
        ];

        // قراءة الباقات الحالية
        $packages = [];
        if (file_exists('packages.json')) {
            $json_content = file_get_contents('packages.json');
            if ($json_content !== false) {
                $packages = json_decode($json_content, true);
                if (json_last_error() !== JSON_ERROR_NONE) {
                    // معالجة خطأ JSON
                    $cards_message = "⚠️ خطأ في قراءة ملف الباقات: " . json_last_error_msg();
                    $packages = []; // إعادة تعيين إلى مصفوفة فارغة
                }
            }
        }
        // إذا كان هناك معرف للباقة، فهذا يعني تعديل
        if (isset($_POST['package_id']) && $_POST['package_id'] !== '') {
            $package_id = $_POST['package_id'];
            $packages[$package_id] = $package_data;
            $cards_message = "✅ تم تحديث الباقة بنجاح!";
        } else {
            // إضافة باقة جديدة
            $packages[] = $package_data;
            $cards_message = "✅ تم حفظ الباقة بنجاح!";
        }

        file_put_contents('packages.json', json_encode($packages, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));
    }
}

?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>إنشاء كروت - نظام الهوتسبوت الذكي</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style/generate_cards.css">

</head>

<body data-theme="light">
    <button class="mobile-menu-btn">
        <i class="fas fa-bars"></i>
    </button>
    <div class="mobile-backdrop"></div>
    <div class="app-container">
        <!-- Sidebar -->
        <aside class="app-sidebar">
            <div class="sidebar-header">
                <div class="sidebar-logo">
                    <i class="fas fa-wifi"></i>
                </div>
                <div class="sidebar-title">MicroPanel OS</div>
            </div>

            <nav class="sidebar-nav d-flex flex-column h-100">
                <!-- زر العودة إلى العودة الى لوحة التحكم -->
                <div class="nav-item">
                    <a href="dashboard.php" class="nav-link">
                        <i class="fas fa-tachometer-alt"></i>
                        <span>العودة الى لوحة التحكم</span>
                    </a>
                </div>

                <div class="nav-item">
                    <a href="add_user.php" class="nav-link">
                        <i class="fas fa-user-edit"></i>
                        <span>إضافة مستخدم</span>
                    </a>
                </div>
                <div class="nav-item">
                    <a href="generate_cards.php" class="nav-link active">
                        <i class="fas fa-credit-card"></i>
                        <span>إنشاء كروت</span>
                    </a>
                </div>
                <div class="nav-item">
                    <a href="user_list.php" class="nav-link">
                        <i class="fas fa-user-friends"></i>
                        <span>قائمة المستخدمين</span>
                    </a>
                </div>
                <div class="nav-item">
                    <a href="#" class="nav-link">
                        <i class="fas fa-chart-pie"></i>
                        <span>الإحصائيات</span>
                    </a>
                </div>
                <div class="nav-item">
                    <a href="#" class="nav-link">
                        <i class="fas fa-sliders-h"></i>
                        <span>الإعدادات</span>
                    </a>
                </div>

                <div class="sidebar-footer">
                    <div><i class="fas fa-clock me-2"></i> <?php echo date('Y-m-d H:i:s'); ?></div>
                    <a href="?logout=1" class="text-danger mt-2 d-block">
                        <i class="fas fa-sign-out-alt me-2"></i> تسجيل الخروج
                    </a>
                </div>
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="app-main">
            <header class="app-header">
                <div>
                    <h1 class="page-title">
                        <i class="fas fa-id-card"></i>
                        <span>إنشاء كروت الإنترنت</span>
                    </h1>
                    <p class="page-description">قم بإنشاء كروت وصول للإنترنت بسهولة وإعدادات متقدمة</p>
                </div>

                <div class="user-actions">
                    <button class="theme-switcher" id="themeSwitcher">
                        <i class="fas fa-moon"></i>
                    </button>
                </div>
            </header>

            <?php if (!empty($cards_message)): ?>
                <div class="alert alert-<?php echo strpos($cards_message, '✅') !== false ? 'success' : 'danger'; ?>">
                    <i class="fas <?php echo strpos($cards_message, '✅') !== false ? 'fa-check-circle' : 'fa-exclamation-circle'; ?>"></i>
                    <div><?php echo $cards_message; ?></div>
                </div>
            <?php endif; ?>
            <!-- حقل اختيار الباقة (يضاف إلى الفورم الرئيسي) -->
            <div class="card animate-fade-in mb-4">
                <div class="card-header">
                    <i class="fas fa-box me-2"></i>
                    <h2 class="card-title">اختيار الباقة</h2>
                </div>
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <div class="form-group">
                                <label class="form-label">اختر باقة محفوظة</label>
                                <select class="form-control" id="packageSelector">
                                    <option value="">-- اختر باقة --</option>
                                    <!-- سيتم ملؤها بالجافاسكريبت -->
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <button type="button" class="btn btn-outline-primary w-100 n-btn" data-bs-toggle="modal" data-bs-target="#packagesModal">
                                <i class="fas fa-cog me-2"></i>إدارة الباقات
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <form method="post" action="" enctype="multipart/form-data">
                <!-- خيارات الحسابات -->
                <div class="card animate-fade-in">
                    <div class="card-header">
                        <i class="fas fa-cog"></i>
                        <h2 class="card-title">خيارات الحسابات</h2>
                    </div>
                    <div class="card-body">
                        <div class="row g-4">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">خيار كلمة المرور</label>
                                    <select class="form-control password_option_group" id="password_option" name="password_option">
                                        <option value="same">نفس اسم المستخدم</option>
                                        <option value="different">كلمة مرور مختلفة</option>
                                        <option value="empty" selected>بدون كلمة مرور</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">تعليق (اختياري)</label>
                                    <input type="text" class="form-control" id="cards_comment" name="cards_comment" placeholder="أي ملاحظات إضافية">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">الحد الأقصى للبيانات</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" id="cards_data_limit" name="cards_data_limit" min="0" step="1" required>
                                        <div class="input-group-append">
                                            <select class="form-control" id="cards_data_unit" name="cards_data_unit">
                                                <option value="MB">ميجابايت</option>
                                                <option value="GB">جيجابايت</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">الوقت المخصص</label>
                                    <div class="row g-2">
                                        <div class="col-6">
                                            <div class="input-group">
                                                <input type="number" class="form-control" id="cards_time_limit" name="cards_time_limit" min="1" placeholder="أيام" required>
                                                <div class="input-group-append">
                                                    <span class="input-group-text">يوم</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="input-group">
                                                <input type="number" class="form-control" id="cards_time_limit_hours" name="cards_time_limit_hours" min="0" max="23" placeholder="ساعات" value="0">
                                                <div class="input-group-append">
                                                    <span class="input-group-text">ساعة</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="form-hint">لجعل الكرت محدداً بالأيام فقط، ضع القيمة 0 في حقل الساعات.</p>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">تقييد الجهاز</label>
                                    <select class="form-control" id="email_restrict" name="email_restrict">
                                        <option value="nobind">بدون تقييد</option>
                                        <option value="bind">تقييد بجهاز واحد</option>
                                    </select>
                                    <p class="form-hint">لتفعيل  تقييد المستخدم بجهاز واحد قم بتفعيلها من الاعدادات</p>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">ملف السرعة</label>
                                    <select class="form-control" id="user_profile" name="user_profile">
                                        <?php if (!empty($profiles) && is_array($profiles)): ?>
                                            <?php foreach ($profiles as $profile): ?>
                                                <?php if (isset($profile['name'])): ?>
                                                    <option value="<?php echo htmlspecialchars($profile['name']); ?>">
                                                        <?php echo htmlspecialchars($profile['name']); ?>
                                                        <?php if (isset($profile['rate-limit'])): ?>
                                                            (<?php echo htmlspecialchars($profile['rate-limit']); ?>)
                                                        <?php endif; ?>
                                                    </option>
                                                <?php endif; ?>
                                            <?php endforeach; ?>
                                        <?php else: ?>
                                            <option disabled>لا توجد بروفايلات متاحة</option>
                                        <?php endif; ?>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- معاينة الكرت -->
                <div class="card animate-fade-in delay-1">
                    <div class="card-header">
                        <i class="fas fa-image"></i>
                        <h2 class="card-title">تصميم الكرت</h2>
                    </div>
                    <div class="card-body">
                        <div class="row g-4">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">صورة الكرت</label>
                                    <div class="file-upload">
                                        <div class="file-upload-btn btn btn-outline w-100">
                                            <span id="file-name">اختر ملف الصورة</span>
                                            <input type="file" name="card_image" id="card_image" class="file-upload-input" accept="image/*" required>
                                        </div>
                                        <p class="form-hint">يجب أن يكون الملف من نوع صورة (JPEG, PNG, etc.)</p>
                                    </div>
                                </div>

                                <div class="card-preview mt-3" id="card-preview" style="display: none;">
                                    <img class="card-preview-image img-fluid rounded" id="card-preview-image" src="" alt="Preview">
                                    <!-- اسم المستخدم -->
                                    <div class="card-preview-number" id="preview-username"
                                        style="font-size: <?php echo $_POST['text_size'] ?? '12'; ?>pt;
                                                        color: <?php echo $_POST['text_color'] ?? '#000000'; ?>;
                                                        left: <?php echo $_POST['user_left'] ?? '30'; ?>%;
                                                        top: <?php echo $_POST['user_top'] ?? '40'; ?>%;">
                                        رمز الدخول
                                    </div>

                                    <!-- كلمة المرور -->
                                    <div class="card-preview-number preview-password1" id="preview-password"
                                        style="font-size: <?php echo $_POST['text_size'] ?? '12'; ?>pt;
                    color: <?php echo $_POST['text_color'] ?? '#000000'; ?>;
                    left: <?php echo $_POST['pass_left'] ?? '30'; ?>%;
                    top: <?php echo $_POST['pass_top'] ?? '50'; ?>%;
                    display: <?php echo ($_POST['password_option'] ?? 'empty') === 'different' ? 'block' : 'none'; ?>;">
                                        كلمة المرور
                                    </div>
                                    <input type="hidden" id="user_left" name="user_left" value="<?php echo $_POST['user_left'] ?? '30'; ?>">
                                    <input type="hidden" id="user_top" name="user_top" value="<?php echo $_POST['user_top'] ?? '40'; ?>">
                                    <input type="hidden" id="pass_left" name="pass_left" value="<?php echo $_POST['pass_left'] ?? '30'; ?>">
                                    <input type="hidden" id="pass_top" name="pass_top" value="<?php echo $_POST['pass_top'] ?? '50'; ?>">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="alert alert-info">
                                    <h6 class="alert-heading"><i class="fas fa-info-circle me-2"></i>تعليمات</h6>
                                    <hr>
                                    <p class="mb-0">بعد تحميل الصورة، اسحب النص في منطقة المعاينة لتحديد موضعه على الكرت.</p>
                                </div>

                                <div class="form-group">
                                    <label class="form-label">حجم النص</label>
                                    <input type="number" class="form-control" id="text_size" name="text_size" min="8" max="36" value="12">
                                </div>

                                <div class="form-group">
                                    <label class="form-label">لون النص</label>
                                    <div class="input-group color-picker">
                                        <input type="color" class="form-control form-control-color" id="text_color" name="text_color" value="#000000">
                                        <div class="input-group-append">
                                            <span class="input-group-text">#000000</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- إعدادات الكروت -->
                <div class="card animate-fade-in delay-2">
                    <div class="card-header">
                        <i class="fas fa-sliders-h"></i>
                        <h2 class="card-title">إعدادات الكروت</h2>
                    </div>
                    <div class="card-body">
                        <div class="row g-4">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">عدد الكروت</label>
                                    <input type="number" class="form-control" id="quantity" name="quantity" min="1" max="1000" value="45" required>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">طول الكرت</label>
                                    <input type="number" class="form-control" id="card_length" name="card_length" min="6" max="9" value="7" required>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">نوع الكروت</label>
                                    <select class="form-control" id="card_type" name="card_type">
                                        <option value="numbers">أرقام فقط</option>
                                        <option value="letters">حروف فقط</option>
                                        <option value="both">أرقام وحروف</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">بادئة الكرت</label>
                                    <input type="text" class="form-control" id="card_prefix" name="card_prefix" placeholder="اختياري">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">عدد الأعمدة</label>
                                    <select class="form-control" id="columns" name="columns" onchange="updateCardCount()">
                                        <option value="3">3 أعمدة</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">عدد الصفوف</label>
                                    <input type="number" class="form-control" id="rows" name="rows" min="14" max="16" value="15" onchange="updateCardCount()">
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="alert alert-secondary py-2">
                                    <p class="mb-0">عدد الكروت في الصفحة الواحدة: <strong class="count" id="cardsPerPage">45</strong></p>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="create_users" name="create_users" value="yes" checked>
                                    <label class="form-check-label" for="create_users">
                                        إنشاء حسابات للكروت
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-grid gap-2 mt-4">
                    <button type="submit" name="generate_cards" class="btn btn-primary btn-lg">
                        <i class="fas fa-id-card me-2"></i> إنشاء الكروت
                    </button>
                </div>
            </form>
        </main>
    </div>

    <!-- نافذة التحميل -->
    <div id="loadingOverlay" class="loading-overlay">
        <div class="loading-content">
            <div class="loading-spinner"></div>
            <div class="loading-text">جاري معالجة طلبك</div>
            <div class="loading-details">الرجاء الانتظار، العملية قيد التنفيذ...</div>
            <div class="progress-container">
                <div id="loadingProgress" class="progress-bar"></div>
            </div>
        </div>
    </div>
    
    <!-- Modal إدارة الباقات -->
   <!-- مودال إدارة الباقات -->
<div class="modal fade" id="packagesModal" tabindex="-1" aria-labelledby="packagesModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg custom-modal-content">

      <!-- رأس المودال -->
      <div class="modal-header bg-primary text-white py-3 px-4">
        <h5 class="modal-title d-flex align-items-center gap-2" id="packagesModalLabel">
          <i class="fas fa-boxes"></i>
          <span>إدارة الباقات</span>
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="إغلاق"></button>
      </div>

      <!-- جسم المودال -->
      <div class="modal-body p-0">
        <div class="row g-0 h-100">

          <!-- قسم قائمة الباقات -->
          <div class="col-md-5 border-end custom-list-section d-flex flex-column p-3">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h6 class="m-0 fw-bold d-flex align-items-center gap-2">
                <i class="fas fa-list"></i>الباقات المحفوظة
              </h6>
              <button class="btn btn-sm btn-outline-primary" id="refreshPackages" title="تحديث القائمة">
                <i class="fas fa-sync-alt"></i>
              </button>
            </div>

            <div class="input-group mb-3">
              <input type="text" class="form-control" id="packageSearch" placeholder="ابحث عن باقة...">
              <button class="btn btn-outline-primary" type="button" aria-label="بحث">
                <i class="fas fa-search"></i>
              </button>
            </div>

            <div class="table-responsive flex-grow-1 custom-table-container">
              <table class="table table-hover table-sm table-borderless">
                <thead class="sticky-top bg-light custom-table-header">
                  <tr>
                    <th width="40%">الاسم</th>
                    <th width="40%">التفاصيل</th>
                    <th width="20%" class="text-center">الإجراءات</th>
                  </tr>
                </thead>
                <tbody id="packagesList" class="border-top">
                  <!-- سيتم ملؤها بالجافاسكريبت -->
                </tbody>
              </table>
            </div>

            <div class="mt-3 text-center text-muted small custom-info-text">
              <i class="fas fa-info-circle me-2"></i>
              انقر على الباقة لعرض تفاصيلها أو تعديلها
            </div>
          </div>

          <!-- قسم تفاصيل الباقة - النموذج -->
          <div class="col-md-7 custom-form-section p-3 d-flex flex-column">
            <h6 class="mb-3 d-flex align-items-center gap-2">
              <i class="fas fa-edit"></i>
              <span id="formTitle">إضافة باقة جديدة</span>
            </h6>

            <form method="post" id="packageForm" class="flex-grow-1 d-flex flex-column">
              <input type="hidden" id="package_id" name="package_id" value="">

              <div class="row g-3 flex-grow-1 overflow-auto">
                <div class="col-12 mb-3">
                  <label for="package_name" class="form-label fw-bold">اسم الباقة</label>
                  <input type="text" class="form-control" id="package_name" name="package_name" required placeholder="ادخل اسم الباقة">
                </div>

                <div class="col-md-6 mb-3">
                  <label for="cards_data_limit" class="form-label fw-bold">الحد الأقصى للبيانات</label>
                  <input type="number" class="form-control" id="cards_data_limit" name="cards_data_limit" min="0" step="1" required placeholder="0">
                </div>

                <div class="col-md-6 mb-3">
                  <label for="cards_data_unit" class="form-label fw-bold">وحدة البيانات</label>
                  <select class="form-select" id="cards_data_unit" name="cards_data_unit" aria-label="وحدة البيانات">
                    <option value="MB">ميجابايت</option>
                    <option value="GB">جيجابايت</option>
                  </select>
                </div>

                <div class="col-md-4 mb-3">
                  <label for="cards_time_limit" class="form-label fw-bold">عدد الأيام</label>
                  <input type="number" class="form-control" id="cards_time_limit" name="cards_time_limit" min="1" required placeholder="0">
                </div>

                <div class="col-md-4 mb-3">
                  <label for="cards_time_limit_hours" class="form-label fw-bold">عدد الساعات</label>
                  <input type="number" class="form-control" id="cards_time_limit_hours" name="cards_time_limit_hours" min="0" max="23" value="0" placeholder="0">
                </div>

                <div class="col-md-4 mb-3">
                  <label for="user_profile" class="form-label fw-bold">ملف السرعة</label>
                  <select class="form-select" id="user_profile" name="user_profile" aria-label="ملف السرعة">
                    <?php if (!empty($profiles) && is_array($profiles)): ?>
                      <?php foreach ($profiles as $profile): ?>
                        <?php if (isset($profile['name'])): ?>
                          <option value="<?php echo htmlspecialchars($profile['name']); ?>">
                            <?php echo htmlspecialchars($profile['name']); ?>
                          </option>
                        <?php endif; ?>
                      <?php endforeach; ?>
                    <?php else: ?>
                      <option disabled>لا توجد بروفايلات متاحة</option>
                    <?php endif; ?>
                  </select>
                </div>

                <div class="col-md-6 mb-3">
                  <label for="password_option" class="form-label fw-bold">خيار كلمة المرور</label>
                  <select class="form-select password_option_group" id="password_option" name="password_option" aria-label="خيار كلمة المرور">
                    <option value="same">نفس اسم المستخدم</option>
                    <option value="different">كلمة مرور مختلفة</option>
                    <option value="empty" selected>بدون كلمة مرور</option>
                  </select>
                </div>

                <div class="col-md-6 mb-3">
                  <label for="email_restrict" class="form-label fw-bold">تقييد الجهاز</label>
                  <select class="form-select" id="email_restrict" name="email_restrict" aria-label="تقييد الجهاز">
                    <option value="nobind">بدون تقييد</option>
                    <option value="bind">تقييد بجهاز واحد</option>
                  </select>
                </div>

                <div class="col-md-6 mb-3">
                  <label for="card_prefix" class="form-label fw-bold">بادئة الكرت</label>
                  <input type="text" class="form-control" id="card_prefix" name="card_prefix" placeholder="بادئة الكرت">
                </div>

                <div class="col-md-6 mb-3">
                  <label for="quantity" class="form-label fw-bold">عدد الكروت</label>
                  <input type="number" class="form-control" id="quantity" name="quantity" min="1" max="1000" value="45" required placeholder="45">
                </div>

                <div class="col-md-6 mb-3">
                  <label for="text_size" class="form-label fw-bold">حجم الخط</label>
                  <input type="number" class="form-control" id="text_size" name="text_size" min="8" max="36" value="12" placeholder="12">
                </div>

                <div class="col-md-6 mb-3">
                  <label for="card_type" class="form-label fw-bold">نوع الكروت</label>
                  <select class="form-select" id="card_type" name="card_type" aria-label="نوع الكروت">
                    <option value="numbers">أرقام فقط</option>
                    <option value="letters">حروف فقط</option>
                    <option value="both">أرقام وحروف</option>
                  </select>
                </div>

                <div class="col-12 mb-3">
                  <label for="cards_comment" class="form-label fw-bold">تعليق (اختياري)</label>
                  <input type="text" class="form-control" id="cards_comment" name="cards_comment" placeholder="تعليق اختياري">
                </div>
              </div>

              <div class="mt-3 pt-3 border-top d-grid gap-2">
                <button type="submit" name="save_package" class="btn btn-primary fw-bold">
                  <i class="fas fa-save me-2"></i>حفظ الباقة
                </button>
                <button type="button" class="btn btn-outline-secondary" id="resetForm">
                  <i class="fas fa-times me-2"></i>إلغاء
                </button>
              </div>
            </form>
          </div>

        </div>
      </div>

    </div>
  </div>
</div>
    <!-- Toast Notifications -->
    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
        <div id="successToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header bg-success text-white">
                <strong class="me-auto">نجاح</strong>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body" id="toastMessage">
                تم تنفيذ العملية بنجاح
            </div>
        </div>

        <div id="errorToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header bg-danger text-white">
                <strong class="me-auto">خطأ</strong>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body" id="toastMessage">
                حدث خطأ أثناء تنفيذ العملية
            </div>
        </div>

        <div id="editToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header bg-info text-white">
                <strong class="me-auto">تعديل</strong>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body" id="toastMessage">
                جاري تحميل بيانات الباقة
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Theme Switcher
        const themeSwitcher = document.getElementById('themeSwitcher');
        const body = document.body;

        // Function to apply the selected theme
        function applyTheme(theme) {
            body.setAttribute('data-theme', theme);
            if (theme === 'dark') {
                themeSwitcher.innerHTML = '<i class="fas fa-sun"></i>';
            } else {
                themeSwitcher.innerHTML = '<i class="fas fa-moon"></i>';
            }
        }

        // Load saved theme from localStorage or fallback to system preference
        const savedTheme = localStorage.getItem('theme');
        const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;

        if (savedTheme) {
            applyTheme(savedTheme);
        } else {
            // Apply system preference if no saved theme
            if (prefersDarkScheme) {
                applyTheme('dark');
                localStorage.setItem('theme', 'dark');
            } else {
                applyTheme('light');
                localStorage.setItem('theme', 'light');
            }
        }

        // Toggle theme on click and save preference
        themeSwitcher.addEventListener('click', function() {
            const currentTheme = body.getAttribute('data-theme');
            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
            applyTheme(newTheme);
            localStorage.setItem('theme', newTheme);
        });
        // File Upload Preview
        const fileInput = document.getElementById('card_image');
        const fileName = document.getElementById('file-name');
        const preview = document.getElementById('card-preview');
        const previewImage = document.getElementById('card-preview-image');

        fileInput.addEventListener('change', function(e) {
            if (this.files && this.files[0]) {
                fileName.textContent = this.files[0].name;

                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.style.display = 'block';
                    previewImage.src = e.target.result;

                    // Initialize draggable elements
                    initDraggableElements();
                }
                reader.readAsDataURL(this.files[0]);
            }
        });

        // Initialize draggable elements
        function initDraggableElements() {
            const usernameElement = document.getElementById('preview-username');
            const passwordElement = document.getElementById('preview-password');

            makeDraggable(usernameElement, 'user_left', 'user_top');
            makeDraggable(passwordElement, 'pass_left', 'pass_top');
        }

        // Make element draggable
        function makeDraggable(element, leftInputId, topInputId) {
            let isDragging = false;
            let offsetX, offsetY;

            element.addEventListener('mousedown', function(e) {
                isDragging = true;

                const rect = element.getBoundingClientRect();
                offsetX = e.clientX - rect.left;
                offsetY = e.clientY - rect.top;

                element.style.cursor = 'grabbing';
                e.preventDefault();
            });

            document.addEventListener('mousemove', function(e) {
                if (!isDragging) return;

                const previewRect = document.getElementById('card-preview').getBoundingClientRect();

                let left = e.clientX - previewRect.left - offsetX;
                let top = e.clientY - previewRect.top - offsetY;

                // Constrain within preview area
                left = Math.max(0, Math.min(left, previewRect.width - element.offsetWidth));
                top = Math.max(0, Math.min(top, previewRect.height - element.offsetHeight));

                // Convert to percentages
                const leftPercent = (left / previewRect.width) * 100;
                const topPercent = (top / previewRect.height) * 100;

                element.style.left = leftPercent + '%';
                element.style.top = topPercent + '%';

                // Update hidden inputs
                document.getElementById(leftInputId).value = leftPercent;
                document.getElementById(topInputId).value = topPercent;
            });

            document.addEventListener('mouseup', function() {
                isDragging = false;
                element.style.cursor = 'grab';
            });
        }

        // Update card count per page
        function updateCardCount() {
            const columns = parseInt(document.getElementById('columns').value);
            const rows = parseInt(document.getElementById('rows').value);
            const cardsPerPage = columns * rows;
            document.getElementById('cardsPerPage').textContent = cardsPerPage;
        }

        // Color picker text update
        document.getElementById('text_color').addEventListener('input', function() {
            document.querySelector('.color-picker .input-group-text').textContent = this.value;
        });

        // Text size change
        document.getElementById('text_size').addEventListener('input', function() {
            document.getElementById('preview-username').style.fontSize = this.value + 'pt';
            document.getElementById('preview-password').style.fontSize = this.value + 'pt';
        });

        // Text color change
        document.getElementById('text_color').addEventListener('input', function() {
            document.getElementById('preview-username').style.color = this.value;
            document.getElementById('preview-password').style.color = this.value;
        });

        // Mobile Menu Toggle (for responsive)
        function toggleSidebar() {
            document.querySelector('.app-sidebar').classList.toggle('open');
        }

        // Show/hide password field based on selection
        const passwordOption = document.getElementById('password_option');
        const passwordElement = document.getElementById('preview-password');

        passwordOption.addEventListener('change', function() {
            if (this.value === 'different') {
                passwordElement.style.display = 'block';
            } else {
                passwordElement.style.display = 'none';
            }
        });

        // Initialize on page load
        document.addEventListener('DOMContentLoaded', function() {
            // Set initial state based on saved value
            const initialOption = "<?php echo $_POST['password_option'] ?? 'empty'; ?>";
            if (initialOption === 'different') {
                passwordElement.style.display = 'block';
            } else {
                passwordElement.style.display = 'none';
            }
        });

        // Save form data to localStorage
        function saveFormData() {
            const form = document.querySelector('form');
            const formData = new FormData(form);
            const formObject = {};

            formData.forEach((value, key) => {
                formObject[key] = value;
            });

            localStorage.setItem('lastCardFormData', JSON.stringify(formObject));
        }

        // Load form data from localStorage
        function loadFormData() {
            const savedData = localStorage.getItem('lastCardFormData');
            if (savedData) {
                const formObject = JSON.parse(savedData);
                const form = document.querySelector('form');

                for (const key in formObject) {
                    const element = form.querySelector(`[name="${key}"]`);
                    if (element) {
                        element.value = formObject[key];
                    }
                }

                // Trigger change events to update UI
                if (formObject.password_option) {
                    document.getElementById('password_option').value = formObject.password_option;
                    document.getElementById('password_option').dispatchEvent(new Event('change'));
                }

                if (formObject.text_size) {
                    document.getElementById('text_size').dispatchEvent(new Event('input'));
                }

                if (formObject.text_color) {
                    document.getElementById('text_color').dispatchEvent(new Event('input'));
                }
            }
        }

        // Add event listeners to save data on change
        document.querySelectorAll('form input, form select, form textarea').forEach(element => {
            element.addEventListener('change', saveFormData);
        });

        // Load saved data when page loads
        document.addEventListener('DOMContentLoaded', loadFormData);


        // تحسين عرض الباقات في القائمة
        function loadPackages() {
            fetch('packages.json')
                .then(response => response.json())
                .then(packages => {
                    const packagesList = document.getElementById('packagesList');
                    const packageSelector = document.getElementById('packageSelector');

                    packagesList.innerHTML = '';
                    packageSelector.innerHTML = '<option value="">-- اختر باقة --</option>';

                    if (!packages || packages.length === 0) {
                        packagesList.innerHTML = `
                    <tr>
                        <td colspan="3" class="text-center py-4 text-muted">
                            <i class="fas fa-box-open fa-2x mb-2"></i>
                            <div>لا توجد باقات محفوظة</div>
                        </td>
                    </tr>
                `;
                        return;
                    }

                    packages.forEach((pkg, index) => {
                        // إضافة إلى قائمة الباقات
                        const packageItem = document.createElement('tr');
                        packageItem.className = 'package-item';
                        packageItem.innerHTML = `
                    <td>
                        <div class="fw-bold">${pkg.name}</div>
                        <small class="text-muted">${pkg.profile}</small>
                    </td>
                    <td>
                        <small class="d-block">
                            <i class="fas fa-database me-1"></i> 
                            ${pkg.data_limit} ${pkg.data_unit}
                        </small>
                        <small class="d-block">
                            <i class="fas fa-clock me-1"></i>
                            ${pkg.time_limit} يوم ${pkg.time_hours > 0 ? `و ${pkg.time_hours} ساعة` : ''}
                        </small>
                    </td>
                    <td class="text-center">
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-sm btn-outline-primary apply-package" data-index="${index}" title="تطبيق">
                                <i class="fas fa-check"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-success edit-package" data-index="${index}" title="تعديل">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger delete-package" data-index="${index}" title="حذف">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </td>
                `;
                        packagesList.appendChild(packageItem);

                        // إضافة إلى سيلكتور الباقات
                        const option = document.createElement('option');
                        option.value = index;
                        option.textContent = pkg.name;
                        packageSelector.appendChild(option);
                    });

                    // إضافة أحداث النقر
                    document.querySelectorAll('.package-item').forEach(row => {
                        row.addEventListener('click', function(e) {
                            if (!e.target.closest('.btn-group')) {
                                const index = this.querySelector('.edit-package').getAttribute('data-index');
                                editPackage(packages[index], index);
                            }
                        });
                    });

                    // أحداث الأزرار
                    document.querySelectorAll('.apply-package').forEach(btn => {
                        btn.addEventListener('click', function() {
                            applyPackage(packages[this.getAttribute('data-index')]);
                        });
                    });

                    document.querySelectorAll('.edit-package').forEach(btn => {
                        btn.addEventListener('click', function(e) {
                            e.stopPropagation();
                            editPackage(packages[this.getAttribute('data-index')], this.getAttribute('data-index'));
                        });
                    });

                    document.querySelectorAll('.delete-package').forEach(btn => {
                        btn.addEventListener('click', function(e) {
                            e.stopPropagation();
                            const index = this.getAttribute('data-index');
                            if (confirm('هل أنت متأكد من حذف هذه الباقة؟')) {
                                deletePackage(index);
                            }
                        });
                    });
                })
                .catch(error => {
                    console.error('Error loading packages:', error);
                    document.getElementById('packagesList').innerHTML = `
                <tr>
                    <td colspan="3" class="text-center py-4 text-danger">
                        <i class="fas fa-exclamation-circle fa-2x mb-2"></i>
                        <div>حدث خطأ في تحميل الباقات</div>
                    </td>
                </tr>
            `;
                });
        }


        // تحسين عرض تفاصيل الباقة عند التحديد
        function editPackage(pkg, index) {
            document.getElementById('formTitle').textContent = `تعديل الباقة: ${pkg.name}`;
            document.getElementById('package_id').value = index;

            // تعبئة الحقول
            const fields = [
                'name', 'data_limit', 'data_unit', 'time_limit', 'time_hours',
                'profile', 'password_option', 'restrict', 'card_prefix',
                'quantity', 'text_size', 'card_type', 'cards_comment'
            ];

            fields.forEach(field => {
                const element = document.querySelector(`[name="${field}"]`);
                if (element && pkg[field] !== undefined) {
                    element.value = pkg[field];

                    // تحديث حالة floating labels
                    if (element.value) {
                        element.nextElementSibling.classList.add('active');
                    }
                }
            });

            // إظهار رسالة تأكيد
            const toast = new bootstrap.Toast(document.getElementById('editToast'));
            document.getElementById('toastMessage').textContent = `تم تحميل بيانات باقة ${pkg.name}`;
            toast.show();

            // إضافة تأثير بسيط
            const formTitle = document.getElementById('formTitle');
            formTitle.style.transform = 'translateX(10px)';
            formTitle.style.transition = 'transform 0.3s';
            setTimeout(() => {
                formTitle.style.transform = 'translateX(0)';
            }, 300);
        }

        // دالة حذف الباقة
        function deletePackage(index) {
            fetch('packages.json')
                .then(response => response.json())
                .then(packages => {
                    packages.splice(index, 1);
                    return fetch('packages.json', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify(packages, null, 2)
                    });
                })
                .then(() => {
                    loadPackages();
                    resetPackageForm();

                    // إظهار رسالة نجاح
                    const toast = new bootstrap.Toast(document.getElementById('successToast'));
                    document.getElementById('toastMessage').textContent = 'تم حذف الباقة بنجاح';
                    toast.show();
                })
                .catch(error => {
                    console.error('Error deleting package:', error);

                    // إظهار رسالة خطأ
                    const toast = new bootstrap.Toast(document.getElementById('errorToast'));
                    document.getElementById('toastMessage').textContent = 'حدث خطأ أثناء حذف الباقة';
                    toast.show();
                });
        }

        // دالة إعادة تعيين النموذج
        function resetPackageForm() {
            document.getElementById('packageForm').reset();
            document.getElementById('package_id').value = '';
            document.getElementById('formTitle').textContent = 'إضافة باقة جديدة';
        }

        // تطبيق إعدادات الباقة
        function applyPackage(pkg) {
            // تعبئة الحقول الأساسية
            document.getElementById('cards_data_limit').value = pkg.data_limit;
            document.getElementById('cards_data_unit').value = pkg.data_unit;
            document.getElementById('cards_time_limit').value = pkg.time_limit;
            document.getElementById('cards_time_limit_hours').value = pkg.time_hours || 0;
            document.getElementById('user_profile').value = pkg.profile;
            document.getElementById('password_option').value = pkg.password_option;
            document.getElementById('email_restrict').value = pkg.restrict;

            // تعبئة الحقول الجديدة
            if (pkg.card_prefix) document.getElementById('card_prefix').value = pkg.card_prefix;
            if (pkg.quantity) document.getElementById('quantity').value = pkg.quantity;
            if (pkg.text_size) {
                document.getElementById('text_size').value = pkg.text_size;
                document.getElementById('text_size').dispatchEvent(new Event('input'));
            }
            if (pkg.card_type) document.getElementById('card_type').value = pkg.card_type;
            if (pkg.cards_comment) document.getElementById('cards_comment').value = pkg.cards_comment;

            // تحديث حالة عرض كلمة المرور
            document.getElementById('password_option').dispatchEvent(new Event('change'));

            // حفظ البيانات في localStorage
            saveFormData();
        }

        // حدث اختيار الباقة من السيلكتور
        document.getElementById('packageSelector').addEventListener('change', function() {
            if (this.value) {
                fetch('packages.json')
                    .then(response => response.json())
                    .then(packages => {
                        if (packages[this.value]) {
                            applyPackage(packages[this.value]);
                        }
                    });
            }
        });

        // تحميل الباقات عند فتح المودال
        document.getElementById('packagesModal').addEventListener('show.bs.modal', function() {
            loadPackages();
            resetPackageForm();
        });

        // إعادة تعيين النموذج عند النقر على زر الإلغاء
        document.getElementById('resetForm').addEventListener('click', resetPackageForm);

        // تحسين البحث في الباقات
        document.getElementById('packageSearch').addEventListener('input', function() {
            const searchTerm = this.value.trim().toLowerCase();
            const rows = document.querySelectorAll('#packagesList tr.package-item');

            if (searchTerm === '') {
                rows.forEach(row => row.style.display = '');
                return;
            }

            let hasResults = false;
            rows.forEach(row => {
                const packageName = row.querySelector('td:first-child').textContent.toLowerCase();
                const packageDetails = row.querySelector('td:nth-child(2)').textContent.toLowerCase();

                if (packageName.includes(searchTerm) || packageDetails.includes(searchTerm)) {
                    row.style.display = '';
                    hasResults = true;
                } else {
                    row.style.display = 'none';
                }
            });

            if (!hasResults) {
                document.getElementById('packagesList').innerHTML = `
            <tr>
                <td colspan="3" class="text-center py-4 text-muted">
                    <i class="fas fa-search fa-2x mb-2"></i>
                    <div>لا توجد نتائج مطابقة للبحث</div>
                </td>
            </tr>
        `;
            }
        });


        // دالة حذف الباقة
        function deletePackage(index) {
            fetch('packages.json')
                .then(response => response.json())
                .then(packages => {
                    // حذف الباقة المحددة
                    packages.splice(index, 1);

                    // حفظ الملف المحدث
                    return fetch('packages.json', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify(packages, null, 2)
                    });
                })
                .then(() => {
                    // إعادة تحميل القائمة
                    loadPackages();
                })
                .catch(error => {
                    console.error('Error deleting package:', error);
                    alert('حدث خطأ أثناء حذف الباقة');
                });
        }

        // حدث تحديث القائمة
        document.getElementById('refreshPackages').addEventListener('click', loadPackages);

        // تطبيق إعدادات الباقة
        // تطبيق إعدادات الباقة
        function applyPackage(pkg) {
            // تعبئة الحقول الأساسية
            document.getElementById('cards_data_limit').value = pkg.data_limit;
            document.getElementById('cards_data_unit').value = pkg.data_unit;
            document.getElementById('cards_time_limit').value = pkg.time_limit;
            document.getElementById('cards_time_limit_hours').value = pkg.time_hours;
            document.getElementById('user_profile').value = pkg.profile;
            document.getElementById('password_option').value = pkg.password_option;
            document.getElementById('email_restrict').value = pkg.restrict;

            // تعبئة الحقول الجديدة
            if (pkg.card_prefix) document.getElementById('card_prefix').value = pkg.card_prefix;
            if (pkg.quantity) document.getElementById('quantity').value = pkg.quantity;
            if (pkg.text_size) {
                document.getElementById('text_size').value = pkg.text_size;
                document.getElementById('text_size').dispatchEvent(new Event('input'));
            }
            if (pkg.card_type) document.getElementById('card_type').value = pkg.card_type;
            if (pkg.cards_comment) document.getElementById('cards_comment').value = pkg.cards_comment;

            // تحديث حالة عرض كلمة المرور
            document.getElementById('password_option').dispatchEvent(new Event('change'));

            // حفظ البيانات في localStorage
            saveFormData();

            // إغلاق النافذة المنبثقة إذا كانت مفتوحة
            const modal = bootstrap.Modal.getInstance(document.getElementById('packagesModal'));
            if (modal) {
                modal.hide();
            }
        }

        // حدث اختيار الباقة من السيلكتور
        document.getElementById('packageSelector').addEventListener('change', function() {
            if (this.value) {
                fetch('packages.json')
                    .then(response => response.json())
                    .then(packages => {
                        if (packages[this.value]) {
                            applyPackage(packages[this.value]);
                            // إغلاق النافذة المنبثقة إذا كانت مفتوحة
                            const modal = bootstrap.Modal.getInstance(document.getElementById('packagesModal'));
                            if (modal) {
                                modal.hide();
                            }
                        }
                    });
            }
        });

        // تحميل الباقات عند فتح المودال
        document.getElementById('packagesModal').addEventListener('show.bs.modal', loadPackages);

        // تحميل الباقات عند تحميل الصفحة
        document.addEventListener('DOMContentLoaded', function() {
            // تحميل الباقات إذا كان ملف packages.json موجودًا
            fetch('packages.json')
                .then(response => {
                    if (response.ok) return response.json();
                    throw new Error('No packages file');
                })
                .then(packages => {
                    const packageSelector = document.getElementById('packageSelector');
                    packageSelector.innerHTML = '<option value="">-- اختر باقة --</option>';

                    packages.forEach((pkg, index) => {
                        const option = document.createElement('option');
                        option.value = index;
                        option.textContent = pkg.name;
                        packageSelector.appendChild(option);
                    });
                })
                .catch(error => {
                    console.log('No packages file found or error loading packages');
                });
        });
    </script>

    <script src="loading.js"></script>
</body>

</html>
وهذا ال css
      :root {
          /* تحسين تعريف المتغيرات */
          --primary-50: #f0f4ff;
          --primary-100: #dbe8ff;
          --primary-200: #bfd5ff;
          --primary-300: #92b7ff;
          --primary-400: #5f8cff;
          --primary-500: #3b66ff;
          --primary-600: #1f40ff;
          --primary-700: #142eeb;
          --primary-800: #1729be;
          --primary-900: #1a2995;
          --primary-950: #111a5a;

          --surface-0: #ffffff;
          --surface-50: #f9fafb;
          --surface-100: #f3f4f6;
          --surface-200: #e5e7eb;
          --surface-300: #d1d5db;
          --surface-400: #9ca3af;
          --surface-500: #6b7280;
          --surface-600: #4b5563;
          --surface-700: #374151;
          --surface-800: #1f2937;
          --surface-900: #111827;
          --surface-950: #030712;

          --success: #10b981;
          --warning: #f59e0b;
          --danger: #ef4444;
          --info: #3b82f6;

          --radius-sm: 0.5rem;
          --radius-md: 0.75rem;
          --radius-lg: 1rem;

          --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
          --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
          --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
          --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
          --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

          --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      }

      [data-theme="dark"] {
          --surface-0: #111827;
          --surface-50: #1f2937;
          --surface-100: #374151;
          --surface-200: #4b5563;
          --surface-300: #6b7280;
          --surface-400: #9ca3af;
          --surface-500: #d1d5db;
          --surface-600: #e5e7eb;
          --surface-700: #f3f4f6;
          --surface-800: #f9fafb;
          --surface-900: #ffffff;
      }

      /* تحسينات عامة */
      *,
      *::before,
      *::after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
      }

      html {
          font-size: 100%;
          scroll-behavior: smooth;
          -webkit-text-size-adjust: 100%;
      }

      body {
          font-family: 'Tajawal', system-ui, -apple-system, sans-serif;
          background-color: var(--surface-50);
          color: var(--surface-700);
          line-height: 1.6;
          transition: var(--transition);
          min-height: 100vh;
          text-rendering: optimizeLegibility;
          -webkit-font-smoothing: antialiased;
      }

      a {
          color: var(--primary-600);
          text-decoration: none;
          transition: var(--transition);
      }

      a:hover,
      a:focus {
          color: var(--primary-800);
          text-decoration: underline;
          outline: none;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
          font-weight: 700;
          margin: 0 0 1rem 0;
          color: var(--surface-900);
          line-height: 1.2;
      }

      .app-container {
          min-height: 100vh;
          display: grid;
          grid-template-rows: auto 1fr;
          grid-template-columns: 1fr;
      }

      @media (min-width: 768px) {
          .app-container {
              grid-template-columns: auto 1fr;
              grid-template-rows: 1fr;
          }
      }

      /* تحسينات الشريط الجانبي */
      .app-sidebar {
          background-color: var(--surface-0);
          border-inline-start: 1px solid var(--surface-200);
          box-shadow: var(--shadow-sm);
          transition: var(--transition);
          display: flex;
          flex-direction: column;
          width: 100%;
          order: -1;
      }

      @media (min-width: 768px) {
          .app-sidebar {
              height: 100vh;
              position: sticky;
              top: 0;
              width: 280px;
              order: 0;
          }
      }

      .sidebar-header {
          padding: 1.5rem;
          border-block-end: 1px solid var(--surface-100);
          background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
          color: white;
          display: flex;
          align-items: center;
          gap: 0.75rem;
      }

      .sidebar-logo {
          width: 2.5rem;
          height: 2.5rem;
          background-color: rgba(255, 255, 255, 0.2);
          border-radius: var(--radius-md);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 1.125rem;
          flex-shrink: 0;
      }

      .sidebar-title {
          font-weight: 700;
          font-size: 1.125rem;
          color: white;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .sidebar-nav {
          padding: 1rem;
          flex-grow: 1;
          overflow-y: auto;
      }

      .nav-item {
          margin-bottom: 0.25rem;
      }

      .nav-link {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          padding: 0.75rem 1rem;
          border-radius: var(--radius-sm);
          color: var(--surface-600);
          transition: var(--transition);
          font-weight: 500;
      }

      .nav-link:hover,
      .nav-link:focus {
          background-color: var(--surface-100);
          color: var(--primary-700);
      }

      .nav-link.active {
          background-color: var(--primary-50);
          color: var(--primary-700);
          font-weight: 600;
      }

      .nav-link i {
          width: 1.5rem;
          text-align: center;
          font-size: 1.1rem;
          flex-shrink: 0;
      }

      .sidebar-footer {
          padding: 1rem;
          font-size: 0.8125rem;
          color: var(--surface-400);
          border-block-start: 1px solid var(--surface-100);
      }

      /* تحسينات المحتوى الرئيسي */
      .app-main {
          padding: 2rem;
          background-color: var(--surface-50);
          min-height: 100vh;
          overflow-x: hidden;
      }

      .app-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 2rem;
          padding: 1rem 0;
          border-block-end: 1px solid var(--surface-200);
          flex-wrap: wrap;
          gap: 1rem;
      }

      .page-title {
          font-size: 1.75rem;
          font-weight: 700;
          color: var(--surface-900);
          display: flex;
          align-items: center;
          gap: 0.75rem;
      }

      .page-title i {
          color: var(--primary-500);
          font-size: 1.5rem;
      }

      .page-description {
          font-size: 0.875rem;
          color: var(--surface-500);
          margin-top: 0.5rem;
      }

      .user-actions {
          display: flex;
          gap: 0.75rem;
          align-items: center;
      }

      .theme-switcher {
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: var(--surface-100);
          color: var(--surface-600);
          border: none;
          cursor: pointer;
          transition: var(--transition);
          flex-shrink: 0;
      }

      .theme-switcher:hover,
      .theme-switcher:focus {
          background-color: var(--surface-200);
          outline: none;
      }

      /* تحسينات البطاقات */
      .card {
          background-color: var(--surface-0);
          border-radius: var(--radius-md);
          box-shadow: var(--shadow-sm);
          transition: all 0.3s ease;
          margin-bottom: 1.5rem;
          overflow: hidden;
      }

      .card:hover {
          box-shadow: var(--shadow);
          transform: translateY(-0.1875rem);
      }

      .card-header {
          padding: 1.25rem 1.5rem;
          border-block-end: 1px solid var(--surface-100);
          display: flex;
          align-items: center;
          gap: 0.75rem;
          background-color: var(--surface-0);
      }

      .card-header i {
          color: var(--primary-500);
          font-size: 1.125rem;
      }

      .card-title {
          font-weight: 600;
          color: var(--surface-800);
          font-size: 1rem;
          margin: 0;
      }

      .card-body {
          padding: 1.5rem;
      }

      /* تحسينات النماذج */
      .form-group {
          margin-bottom: 1.25rem;
      }

      .form-label {
          display: block;
          margin-bottom: 0.5rem;
          font-weight: 500;
          color: var(--surface-700);
          font-size: 0.875rem;
      }

      .form-control {
          width: 100%;
          padding: 0.75rem 1rem;
          border: 1px solid var(--surface-300);
          border-radius: var(--radius-sm);
          background-color: var(--surface-0);
          color: var(--surface-800);
          transition: var(--transition);
          font-family: 'Tajawal', sans-serif;
      }

      .form-control:focus {
          outline: none;
          border-color: var(--primary-300);
          box-shadow: 0 0 0 3px var(--primary-100);
      }

      .input-group {
          display: flex;
      }

      .input-group .form-control {
          flex: 1;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
      }

      .input-group-append {
          display: flex;
      }

      .input-group-text {
          padding: 0 1rem;
          background-color: var(--surface-100);
          border: 1px solid var(--surface-300);
          border-right: none;
          border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
          display: flex;
          align-items: center;
          color: var(--surface-600);
          font-size: 0.875rem;
          border-bottom-left-radius: 8px;
          border-top-left-radius: 8px;
          border-bottom-right-radius: 0px;
          border-top-right-radius: 0px;
      }

      .form-hint {
          font-size: 0.75rem;
          color: var(--surface-500);
          margin-top: 0.5rem;
      }

      /* File Upload */
      .file-upload {
          position: relative;
      }

      .file-upload-input {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
          cursor: pointer;
      }

      .file-upload-btn {
          padding: 0.75rem;
          border-radius: var(--radius-sm);
          border: 1px dashed var(--surface-300);
          text-align: center;
          transition: var(--transition);
          width: 100%;
      }

      .file-upload-btn:hover {
          border-color: var(--primary-300);
          background-color: var(--primary-50);
      }

      /* Preview */
      .card-preview {
          position: relative;
          background-color: var(--surface-100);
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: auto;
          aspect-ratio: 1 / 1;
          border-radius: var(--radius-sm);
          margin-top: 1rem;
          display: none;
      }

      .card-preview-image {
          width: 100%;
          height: 100%;
          object-fit: contain;
          background-color: var(--surface-100);
      }

      .card-preview-number {
          position: absolute;
          font-weight: bold;
          cursor: move;
          user-select: none;
      }

      /* Color Picker */
      .color-picker .form-control-color {
          width: 3.125rem;
          height: 3.125rem;
          padding: 0.3125rem;
          border-radius: var(--radius-sm) 0 0 var(--radius-sm);
      }

      /* تحسينات الأزرار */
      .btn {
          font-weight: 500;
          padding: 0.75rem 1.5rem;
          border-radius: var(--radius-sm);
          transition: var(--transition);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          cursor: pointer;
          border: 1px solid transparent;
          font-family: inherit;
          line-height: 1.5;
      }

      .btn-lg {
          padding: 1rem 2rem;
          font-size: 1rem;
      }

      .btn-primary {
          background-color: var(--primary-500);
          border-color: var(--primary-500);
          color: white;
      }

      .btn-primary:hover,
      .btn-primary:focus {
          background-color: var(--primary-600);
          border-color: var(--primary-600);
      }

      .btn-outline {
          background-color: transparent;
          border: 1px solid var(--surface-300);
          color: var(--surface-700);
      }

      .btn-outline:hover,
      .btn-outline:focus {
          background-color: var(--surface-100);
      }

      .btn-success {
          background-color: var(--success);
          border-color: var(--success);
          color: white;
      }

      /* تحسينات التنبيهات */
      .alert {
          padding: 1rem;
          border-radius: var(--radius-sm);
          margin-bottom: 1.5rem;
          display: flex;
          align-items: center;
          gap: 0.75rem;
          font-size: 0.875rem;
          border-inline-start: 0.25rem solid transparent;
      }

      .alert-success {
          background-color: rgba(16, 185, 129, 0.1);
          color: var(--success);
          border-inline-start-color: var(--success);
      }

      .alert-danger {
          background-color: rgba(239, 68, 68, 0.1);
          color: var(--danger);
          border-inline-start-color: var(--danger);
      }

      .alert-info {
          background-color: rgba(59, 130, 246, 0.1);
          color: var(--info);
          border-inline-start-color: var(--info);
      }

      .alert-secondary {
          background-color: var(--surface-100);
          color: var(--surface-700);
          padding: 0.5rem 1rem;
      }

      /* تأثيرات الحركة */
      .animate-fade-in {
          animation: fadeIn 0.3s ease-in-out forwards;
      }

      @keyframes fadeIn {
          from {
              opacity: 0;
              transform: translateY(0.625rem);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      .delay-1 {
          animation-delay: 0.1s;
      }

      .delay-2 {
          animation-delay: 0.2s;
      }

      .delay-3 {
          animation-delay: 0.3s;
      }

      /* تحسينات شريط التمرير */
      ::-webkit-scrollbar {
          width: 0.625rem;
          height: 0.625rem;
      }

      ::-webkit-scrollbar-track {
          background: var(--surface-100);
      }

      ::-webkit-scrollbar-thumb {
          background: var(--primary-500);
          border-radius: 0.625rem;
      }

      ::-webkit-scrollbar-thumb:hover {
          background: var(--primary-600);
      }

      /* تحسينات الوضع المظلم */
      [data-theme="dark"] .card {
          border: 1px solid var(--surface-200);
      }

      [data-theme="dark"] .nav-link {
          color: var(--surface-400);
      }

      [data-theme="dark"] .nav-link:hover,
      [data-theme="dark"] .nav-link.active {
          color: var(--primary-400);
      }

      /* Form Switch */
      .form-switch .form-check-input {
          width: 3rem;
          height: 1.5rem;
          margin-right: 0.5rem;
      }

      /* Grid System */
      .row {
          display: flex;
          flex-wrap: wrap;
          margin-right: -0.75rem;
          margin-left: -0.75rem;
      }

      .col-md-6 {
          flex: 0 0 50%;
          max-width: 50%;
          padding-right: 0.75rem;
          padding-left: 0.75rem;
      }

      .col-12 {
          flex: 0 0 100%;
          max-width: 100%;
          padding-right: 0.75rem;
          padding-left: 0.75rem;
      }

      .col-6 {
          flex: 0 0 50%;
          max-width: 50%;
          padding-right: 0.75rem;
          padding-left: 0.75rem;
      }

      .g-4 {
          margin-right: -1rem;
          margin-left: -1rem;
      }

      .g-4>* {
          padding-right: 1rem;
          padding-left: 1rem;
      }

      .d-grid {
          display: grid;
      }

      .gap-2 {
          gap: 0.5rem;
      }

      /* Mobile Menu */
      .mobile-menu-btn {
          display: none;
      }

      /* Loading Overlay */
      .loading-overlay {
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0.7);
          z-index: 9999;
          display: none;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          backdrop-filter: blur(5px);
          transition: all 0.3s ease;
      }

      .loading-content {
          background-color: var(--surface-0);
          border-radius: var(--radius-lg);
          padding: 1.875rem;
          width: 90%;
          max-width: 25rem;
          text-align: center;
          box-shadow: var(--shadow-xl);
          animation: fadeIn 0.3s ease-out;
      }

      .loading-spinner {
          width: 3.125rem;
          height: 3.125rem;
          border: 0.3125rem solid var(--surface-100);
          border-top: 0.3125rem solid var(--primary-500);
          border-radius: 50%;
          animation: spin 1s linear infinite;
          margin: 0 auto 1.25rem;
      }

      .loading-text {
          font-family: 'Tajawal', sans-serif;
          font-size: 1.125rem;
          font-weight: 500;
          color: var(--surface-800);
          margin-top: 0.9375rem;
      }

      .loading-details {
          font-family: 'Tajawal', sans-serif;
          font-size: 0.875rem;
          color: var(--surface-600);
          margin-top: 0.625rem;
      }

      .progress-container {
          width: 100%;
          height: 0.5rem;
          background-color: var(--surface-100);
          border-radius: var(--radius-sm);
          margin-top: 1.25rem;
          overflow: hidden;
      }

      .progress-bar {
          height: 100%;
          background: linear-gradient(90deg, var(--primary-500), var(--primary-400));
          width: 0%;
          transition: width 0.3s ease;
          border-radius: var(--radius-sm);
      }

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

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

      /* تحسينات الطباعة */
      @media print {
          .no-print {
              display: none !important;
          }

          body {
              background-color: white !important;
              color: black !important;
              font-size: 12pt;
          }

          .card {
              box-shadow: none !important;
              border: 1px solid #ddd !important;
              page-break-inside: avoid;
          }

          .app-sidebar {
              display: none !important;
          }

          .app-main {
              padding: 0 !important;
              width: 100% !important;
          }
      }

      /* تحسينات التجاوب */
      @media (max-width: 1199px) {
          .app-main {
              padding: 1.5rem;
          }

          .sidebar-header {
              padding: 1.25rem;
          }
      }

      @media (max-width: 991px) {
          .card-body {
              padding: 1.25rem;
          }
      }

      @media (max-width: 767px) {
          .app-sidebar {
              position: fixed;
              top: -100%;
              left: 0;
              width: 100%;
              height: auto;
              max-height: 80vh;
              overflow-y: auto;
              z-index: 1000;
              transition: top 0.3s ease;
              box-shadow: var(--shadow-xl);
          }

          .mobile-menu-btn {
              display: flex;
          }

          .app-sidebar.open {
              top: 0;
              border-radius: 0px 0px 35px 35px;
          }

          .mobile-menu-btn {
              position: fixed;
              bottom: 1rem;
              right: 1rem;
              z-index: 999;
              width: 2.5rem;
              height: 2.5rem;
              border-radius: 50%;
              background-color: var(--primary-500);
              color: white;
              border: none;
              align-items: center;
              justify-content: center;
              box-shadow: var(--shadow-md);
              cursor: pointer;
          }

          .mobile-backdrop {
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background-color: rgba(0, 0, 0, 0.5);
              z-index: 998;
              opacity: 0;
              pointer-events: none;
              transition: opacity 0.3s ease;
          }

          .mobile-backdrop.open {
              opacity: 1;
              pointer-events: auto;
          }

          .app-header {
              flex-direction: column;
              align-items: stretch;
              margin-bottom: 1.5rem;
          }

          .user-actions {
              margin-top: 1rem;
              width: 100%;
              justify-content: flex-end;
          }

          .page-title {
              font-size: 1.25rem;
          }

          .card-header {
              padding: 1rem;
          }

          .card-body {
              padding: 1rem;
          }

          .col-md-6 {
              flex: 0 0 100%;
              max-width: 100%;
          }
      }

      @media (max-width: 575px) {
          html {
              font-size: 15px;
          }

          .app-main {
              padding: 0.75rem;
          }

          .page-title {
              font-size: 1.125rem;
          }

          .card-title {
              font-size: 0.9375rem;
          }

          .user-actions {
              gap: 0.5rem;
          }

          .theme-switcher {
              width: 2.25rem;
              height: 2.25rem;
          }
      }

      /* تنسيقات الباقات */
      #packagesList {
          max-height: 400px;
          overflow-y: auto;
      }

      .list-group-item {
          transition: all 0.3s;
      }

      .list-group-item:hover {
          background-color: #f8f9fa;
      }

      .apply-package {
          transition: all 0.2s;
      }

      .apply-package:hover {
          transform: scale(1.05);
      }

      /* تحسينات للواجهة */
      .modal-content {
          border-radius: 10px;
      }

      .modal-header {
          border-bottom: 1px solid #eee;
      }

      .modal-footer {
          border-top: 1px solid #eee;
      }

      .card-header {
          font-weight: 600;
      }

      /* تنسيقات الباقات المحفوظة */
      #packagesList tr {
          transition: all 0.3s;
      }

      #packagesList tr:hover {
          background-color: rgba(0, 0, 0, 0.05);
      }

      #packagesList .btn-group {
          white-space: nowrap;
      }

      #refreshPackages {
          padding: 0.25rem 0.5rem;
          font-size: 0.8rem;
      }



      .n-btn {
          color: #fff;
          background-color: #3b82f6;
          border-color: #3b82f6;
      }

      /* تحسينات عامة */
      #packagesModal {
          --modal-primary: #2c3e50;
          --modal-secondary: #f9fbfc;
          --modal-accent: #3498db;
          --modal-text: #2d3436;
          --modal-border: #e0e6ed;
          --modal-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
      }

      /* حجم المودال */
      #packagesModal .modal-dialog.modal-lg.modal-dialog-centered {
          max-width: 820px;
      }

      /* محتوى المودال */
      #packagesModal .modal-content {
          border: none;
          border-radius: 10px;
          overflow: hidden;
          box-shadow: var(--modal-shadow);
          font-size: 0.85rem;
      }

      /* الهيدر */
      #packagesModal .modal-header {
          background-color: var(--modal-primary);
          color: #fff;
          padding: 1rem 1.5rem;
      }

      #packagesModal .modal-header .modal-title {
          font-size: 1.1rem;
          gap: 0.5rem;
      }

      #packagesModal .modal-header .btn-close {
          filter: invert(1);
          opacity: 0.7;
          width: 1rem;
          height: 1rem;
      }

      /* جسم المودال */
      #packagesModal .modal-body {
          padding: 0;
          display: flex;
          min-height: 52vh;
      }

      /* القائمة */
      #packagesModal .custom-list-section {
          width: 38%;
          background: var(--modal-secondary);
          padding: 1rem;
          border-right: 1px solid var(--modal-border);
      }

      #packagesModal .custom-list-section h6 {
          font-size: 0.9rem;
          margin-bottom: 0.75rem;
      }

      /* جدول */
      #packagesModal .custom-table-container {
          flex: 1;
          background: #fff;
          border-radius: 6px;
          overflow-y: auto;
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
      }

      #packagesModal .custom-table-header th {
          font-size: 0.8rem;
          padding: 0.5rem 0.75rem;
      }

      /* النموذج */
      #packagesModal .custom-form-section {
          width: 62%;
          padding: 1rem;
      }

      #packagesModal .form-label {
          font-size: 0.8rem;
      }

      #packagesModal .form-control,
      #packagesModal .form-select {
          padding: 0.5rem 0.75rem;
          font-size: 0.8rem;
      }

      /* الأزرار */
      #packagesModal .btn {
          padding: 0.5rem 1rem;
          font-size: 0.85rem;
          border-radius: 5px;
      }

      /* استجابة الموبايل */
      @media (max-width: 768px) {
          #packagesModal .modal-body {
              flex-direction: column;
          }

          #packagesModal .custom-list-section,
          #packagesModal .custom-form-section {
              width: 100%;
              padding: 0.75rem;
          }

          #packagesModal .custom-table-container {
              max-height: 220px;
          }
      }

تحتوي فقط على خيارات لتفعيل ميزة التقييد بجهاز واحد و تعديل الوقت في الراوتر ومسح ال dns cache كل نصف ساعة
وحذف الكروت المنتهية كل 3 ساعات