اريد  تحسين تصميم الكود واسلوب العرض وتغيير ال css
<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">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title d-flex align-items-center gap-2">
                        <i class="fas fa-boxes"></i>
                        <span>إدارة الباقات</span>
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-0">
                    <div class="row g-0 h-100">
                        <!-- قسم قائمة الباقات -->
                        <div class="col-md-5 border-end">
                            <div class="p-3 h-100 d-flex flex-column">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="m-0 fw-bold">
                                        <i class="fas fa-list me-2"></i>الباقات المحفوظة
                                    </h6>
                                    <div class="d-flex gap-2">
                                        <button class="btn btn-sm btn-outline-light" id="refreshPackages" title="تحديث القائمة">
                                            <i class="fas fa-sync-alt"></i>
                                        </button>
                                    </div>
                                </div>

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

                                <div class="table-responsive flex-grow-1" style="max-height: 400px;">
                                    <table class="table table-hover table-sm table-borderless">
                                        <thead class="sticky-top bg-light">
                                            <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">
                                    <i class="fas fa-info-circle me-2"></i>
                                    انقر على الباقة لعرض تفاصيلها أو تعديلها
                                </div>
                            </div>
                        </div>

                        <!-- قسم تفاصيل الباقة -->
                        <div class="col-md-7">
                            <div class="p-3 h-100 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">
                                        <div class="col-md-12">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="package_name" name="package_name" required placeholder=" ">
                                                <label for="package_name">اسم الباقة</label>
                                            </div>
                                        </div>

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

                                        <div class="col-md-6">
                                            <div class="form-floating">
                                                <select class="form-control" name="cards_data_unit">
                                                    <option value="MB">ميجابايت</option>
                                                    <option value="GB">جيجابايت</option>
                                                </select>
                                                <label>وحدة البيانات</label>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-floating">
                                                <input type="number" class="form-control" name="cards_time_limit" min="1" placeholder=" " required>
                                                <label>عدد الأيام</label>
                                            </div>
                                        </div>

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

                                        <div class="col-md-4">
                                            <div class="form-floating">
                                                <select class="form-control" 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']); ?>
                                                                </option>
                                                            <?php endif; ?>
                                                        <?php endforeach; ?>
                                                    <?php else: ?>
                                                        <option disabled>لا توجد بروفايلات متاحة</option>
                                                    <?php endif; ?>
                                                </select>
                                                <label>ملف السرعة</label>
                                            </div>
                                        </div>

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

                                        <div class="col-md-6">
                                            <div class="form-floating">
                                                <select class="form-control" name="email_restrict">
                                                    <option value="nobind">بدون تقييد</option>
                                                    <option value="bind">تقييد بجهاز واحد</option>
                                                </select>
                                                <label>تقييد الجهاز</label>
                                            </div>
                                        </div>

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

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

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

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

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

                                    <div class="mt-auto pt-3">
                                        <div class="d-grid gap-2">
                                            <button type="submit" name="save_package" class="btn btn-primary">
                                                <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>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
زقم بانشاء css مناسب