     :root {
         --primary: #3d83ff;
         --text-color: #fff;
         --border-radius-large: 25px;
         --border-radius-medium: 15px;
         --border-radius-small: 10px;
         --card-bg: rgba(255, 255, 255, 0.03);
     }

     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         font-family: "Space Grotesk", sans-serif;
         scroll-behavior: smooth;
     }

     body {
         background: linear-gradient(to bottom, #0b0b0b 0%, #112233 50%, #0d141a 100%);
         color: #fff;
         min-height: 100vh;
         overflow-x: hidden;
     }


     /* Blog List Page */
     .blog-section {
         width: 95%;
         margin: 4rem auto;
         padding: 2rem 0;
     }

     .section-title {
         font-size: 56px;
         font-weight: 700;
         margin-bottom: 40px;
         background: linear-gradient(to left, #3d84ff81, #3d84ffde);
         filter: drop-shadow(0 0 10px #3d84ff5f);
         text-shadow: 0 0 5px rgba(61, 131, 255, 0.2);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
         color: transparent;
         text-align: center;
     }

     .blog-grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
         gap: 30px;
         margin-top: 2rem;
     }

     .blog-card {
         background: var(--card-bg);
         border-radius: var(--border-radius-medium);
         box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
         backdrop-filter: blur(5.1px);
         -webkit-backdrop-filter: blur(5.1px);
         overflow: hidden;
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         position: relative;
         height: 100%;
         display: flex;
         flex-direction: column;
     }

     .blog-card::before {
         background: radial-gradient(circle 800px at var(--mouse-x) var(--mouse-y), hsla(218, 100%, 62%, 0.1), transparent 40%);
         border-radius: inherit;
         content: "";
         height: 100%;
         left: 0;
         top: 0;
         position: absolute;
         width: 100%;
         z-index: -1;
     }

     .blog-card:hover {
         transform: translateY(-10px);
         box-shadow: 0 10px 30px rgba(61, 132, 255, 0.3);
     }

     .blog-thumbnail {
         width: 100%;
         height: 220px;
         object-fit: cover;
         display: block;
     }

     .blog-content {
         padding: 25px;
         flex-grow: 1;
         display: flex;
         flex-direction: column;
     }

     .blog-title {
         font-size: 1.6rem;
         margin-bottom: 15px;
         color: #fff;
     }

     .blog-excerpt {
         color: #bbb;
         line-height: 1.6;
         margin-bottom: 20px;
         flex-grow: 1;
     }

     .blog-meta {
         display: flex;
         justify-content: space-between;
         color: #888;
         font-size: 0.9rem;
         margin-bottom: 20px;
     }

     .blog-tags {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
         margin-top: 10px;
     }

     .tag {
         background: rgba(61, 131, 255, 0.2);
         color: #3d83ff;
         padding: 5px 10px;
         border-radius: 20px;
         font-size: 0.8rem;
     }

     .read-more-btn {
         display: inline-block;
         padding: 12px 24px;
         background-color: #3d84ffc2;
         filter: drop-shadow(0 0 10px #3d84ffb9);
         border-radius: 16px;
         text-decoration: none;
         color: #fff;
         transition: .3s ease-in-out;
         text-align: center;
         font-weight: 500;
         width: fit-content;
         margin-top: 10px;
     }

     .read-more-btn:hover {
         background-color: rgba(61, 132, 255, 0.914);
         transform: translateY(-3px);
     }

     /* Single Blog Page */
     .blog-post-container {
         width: 90%;
         max-width: 900px;
         margin: 4rem auto;
         padding: 3rem 0;
     }

     .post-header {
         text-align: center;
         margin-bottom: 40px;
     }

     .post-title {
         font-size: 2.8rem;
         margin-bottom: 20px;
         color: #fff;
     }

     .post-meta {
         color: #888;
         display: flex;
         justify-content: center;
         gap: 20px;
         margin-bottom: 20px;
     }

     .post-content {
         line-height: 1.8;
         font-size: 1.1rem;
     }

     .post-content p {
         margin-bottom: 1.5rem;
     }

     .post-content img {
         max-width: 100%;
         border-radius: var(--border-radius-medium);
         margin: 2rem 0;
     }

     .related-posts {
         margin-top: 5rem;
     }

     .related-title {
         font-size: 1.8rem;
         margin-bottom: 30px;
         color: #fff;
         position: relative;
         padding-bottom: 15px;
     }

     .related-title::after {
         content: '';
         position: absolute;
         bottom: 0;
         left: 0;
         width: 60px;
         height: 3px;
         background: var(--primary);
     }

     /* Admin Panel */
     .admin-container {
         width: 100%;
         min-height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
         padding: 2rem;
         text-align: center;
     }

     .admin-card {
         background: var(--card-bg);
         border-radius: var(--border-radius-medium);
         box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
         backdrop-filter: blur(5.1px);
         -webkit-backdrop-filter: blur(5.1px);
         padding: 40px;
         width: 100%;
         max-width: 500px;
         position: relative;
         margin: 1rem auto;
     }

     .admin-card::before {
         background: radial-gradient(circle 800px at var(--mouse-x) var(--mouse-y), hsla(218, 100%, 62%, 0.1), transparent 40%);
         border-radius: inherit;
         content: "";
         height: 100%;
         left: 0;
         top: 0;
         position: absolute;
         width: 100%;
         z-index: -1;
     }

     .admin-title {
         font-size: 2rem;
         margin-bottom: 30px;
         text-align: center;
         color: #fff;
     }

     .form-group {
         text-align: left;
         margin-bottom: 25px;
     }

     .form-label {
         display: block;
         margin-bottom: 8px;
         color: #bbb;
     }

     .form-input {
         width: 100%;
         padding: 14px;
         border: 1px solid rgba(255, 255, 255, 0.1);
         background: rgba(255, 255, 255, 0.05);
         border-radius: var(--border-radius-small);
         color: #fff;
         font-size: 1rem;
     }

     .form-input:focus {
         outline: none;
         border-color: var(--primary);
     }

     .login-btn {
         width: 100%;
         padding: 14px;
         background-color: #3d84ffc2;
         filter: drop-shadow(0 0 10px #3d84ffb9);
         border-radius: 16px;
         color: #fff;
         border: none;
         font-size: 1rem;
         font-weight: 500;
         cursor: pointer;
         transition: .3s ease-in-out;
     }

     .login-btn:hover {
         background-color: rgba(61, 132, 255, 0.914);
     }

     .dashboard {
         width: 95%;
         margin: 2rem auto;
     }

     .admin-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 30px;
     }

     .add-blog-btn , .back-btn {
         padding: 12px 24px;
         background-color: #3d84ffc2;
         filter: drop-shadow(0 0 10px #3d84ffb9);
         border-radius: 16px;
         text-decoration: none;
         color: #fff;
         transition: .3s ease-in-out;
         font-weight: 500;
     }

     .add-blog-btn:hover  , .back-btn:hover{
         background-color: rgba(61, 132, 255, 0.914);
         transform: translateY(-3px);
     }

     .posts-table {
         width: 100%;
         border-collapse: collapse;
         background: var(--card-bg);
         border-radius: var(--border-radius-medium);
         overflow: hidden;
     }

     .posts-table th {
         background: rgba(61, 131, 255, 0.2);
         padding: 15px;
         text-align: left;
         color: #3d83ff;
     }

     .posts-table td {
         padding: 15px;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }

     .action-btn {
         padding: 8px 15px;
         border-radius: var(--border-radius-small);
         text-decoration: none;
         font-size: 0.9rem;
         margin-right: 10px;
     }

     .edit-btn {
         background: rgba(76, 175, 80, 0.2);
         color: #4CAF50;
     }

     .delete-btn {
         background: rgba(244, 67, 54, 0.2);
         color: #F44336;
     }

     .editor-container {
         margin-top: 30px;
         background: rgba(255, 255, 255, 0.05);
         border-radius: var(--border-radius-medium);
         padding: 20px;
         min-height: 300px;
     }

     .image-upload {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         border: 2px dashed rgba(255, 255, 255, 0.1);
         border-radius: var(--border-radius-medium);
         padding: 30px;
         text-align: center;
         margin-bottom: 20px;
         cursor: pointer;
         transition: border-color 0.3s;
     }

     .image-upload:hover {
         border-color: var(--primary);
     }

     .image-upload i {
         font-size: 3rem;
         margin-bottom: 15px;
         color: rgba(255, 255, 255, 0.3);
     }

     .image-upload p {
         color: #888;
     }

     .tag-input {
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
         margin-top: 10px;
     }

     .tag-input input {
         flex-grow: 1;
         min-width: 100px;
     }

     .tag-preview {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
         margin-top: 10px;
     }

     .tag-preview span {
         background: rgba(61, 131, 255, 0.2);
         color: #3d83ff;
         padding: 5px 10px;
         border-radius: 20px;
         font-size: 0.9rem;
     }

     /* Footer */

     .social-links a {
         display: inline-block;
         height: 40px;
         width: 40px;
         background-color: #3d84ffba;
         margin: 0 10px 10px 0;
         text-align: center;
         line-height: 40px;
         border-radius: 50%;
         color: #ffffff;
         transition: all 0.5s ease;
     }

     .footer-bottom {
         text-align: center;
         padding-top: 30px;
         color: #888;
         font-size: 0.9rem;
         border-top: 1px solid rgba(255, 255, 255, 0.1);
         margin-top: 30px;
     }

     /* Responsive */
     @media (max-width: 992px) {
         .blog-grid {
             grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
         }

         .footer-col {
             width: 50%;
         }

         .header.active {
             align-items: start;
             height: 400px;

         }
     }

     @media (max-width: 768px) {
         .blog-grid {
             grid-template-columns: 1fr;
         }

         .section-title {
             font-size: 2.5rem;
         }

         .post-title {
             font-size: 2rem;
         }

         .admin-header {
             flex-direction: column;
             gap: 20px;
             align-items: flex-start;
         }
     }

     /* ==================== */
     /* BLOG FORM STYLING - ENHANCED */
     /* ==================== */

     #add-blog {
         display: none;
         /* سيتم التحكم به عبر JS */
         animation: fadeIn 0.5s ease-out;
         padding: 2rem;
         background: rgba(13, 20, 26, 0.8);
         border-radius: var(--border-radius-large);
         margin: 2rem auto;
         width: 95%;
         max-width: 1200px;
     }

     @keyframes fadeIn {
         from {
             opacity: 0;
             transform: translateY(20px);
         }

         to {
             opacity: 1;
             transform: translateY(0);
         }
     }

     .admin-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 1.5rem;
         margin-bottom: 2rem;
         background: rgba(61, 131, 255, 0.1);
         backdrop-filter: blur(10px);
         border-radius: var(--border-radius-medium);
         border: 1px solid rgba(61, 131, 255, 0.2);
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     }

     .admin-title {
         font-size: 2rem;
         margin: 0;
         background: linear-gradient(90deg, #3d83ff, #6ba8ff);
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
         text-shadow: 0 2px 10px rgba(61, 131, 255, 0.3);
     }

     .add-blog-btn , .back-btn  {
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         padding: 0.7rem 1.5rem;
         background: rgba(61, 131, 255, 0.2);
         border: 1px solid rgba(61, 131, 255, 0.4);
         border-radius: var(--border-radius-small);
         color: #3d83ff;
         transition: all 0.3s ease;
         text-decoration: none;
         font-weight: 500;
     }

     .add-blog-btn:hover , .back-btn:hover   {
         background: rgba(61, 131, 255, 0.3);
         transform: translateY(-2px);
         box-shadow: 0 5px 15px rgba(61, 131, 255, 0.2);
     }

     /* Form Styling */
     #blog-form {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 2rem;
     }

     .form-group {
         margin-bottom: 1.5rem;
         position: relative;
     }

     .form-group.full-width {
         grid-column: span 2;
     }

     .form-label {
         display: block;
         margin-bottom: 0.8rem;
         font-weight: 500;
         color: rgba(255, 255, 255, 0.9);
         font-size: 1.1rem;
     }

     .form-input {
         width: 100%;
         padding: 1rem;
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: var(--border-radius-small);
         color: white;
         font-size: 1rem;
         transition: all 0.3s ease;
     }

     .form-input:focus {
         outline: none;
         border-color: #3d83ff;
         box-shadow: 0 0 0 3px rgba(61, 131, 255, 0.2);
         background: rgba(255, 255, 255, 0.08);
     }

     /* Image Upload Styling */
     .image-upload {
         border: 2px dashed rgba(61, 131, 255, 0.3);
         border-radius: var(--border-radius-medium);
         padding: 3rem 2rem;
         text-align: center;
         cursor: pointer;
         transition: all 0.3s ease;
         position: relative;
         overflow: hidden;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
     }

     .image-upload:hover {
         border-color: #3d83ff;
         background: rgba(61, 131, 255, 0.05);
     }

     .image-upload i {
         font-size: 2.5rem;
         color: rgba(61, 131, 255, 0.5);
         margin-bottom: 1rem;
         transition: all 0.3s ease;
     }

     .image-upload:hover i {
         color: #3d83ff;
         transform: translateY(-5px);
     }

     .image-upload p {
         color: rgba(255, 255, 255, 0.6);
         margin: 0.3rem 0;
         font-size: 0.9rem;
     }

     /* Editor Container */
     .editor-container {
         background: rgba(255, 255, 255, 0.05);
         border-radius: var(--border-radius-medium);
         min-height: 300px;
         padding: 1.5rem;
         border: 1px solid rgba(255, 255, 255, 0.1);
         transition: all 0.3s ease;
     }

     .editor-container:hover {
         border-color: rgba(61, 131, 255, 0.3);
     }

     /* Tags Styling */
     .tag-input-container {
         display: flex;
         flex-direction: column;
     }

     .tag-input {
         display: flex;
         align-items: center;
     }

     .tag-input input {
         flex-grow: 1;
         margin-right: 0.5rem;
     }

     .tag-preview {
         display: flex;
         flex-wrap: wrap;
         gap: 0.5rem;
         margin-top: 1rem;
     }

     .tag-item {
         background: rgba(61, 131, 255, 0.2);
         color: #3d83ff;
         padding: 0.5rem 1rem;
         border-radius: 20px;
         font-size: 0.85rem;
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         transition: all 0.2s ease;
     }

     .tag-item:hover {
         background: rgba(61, 131, 255, 0.3);
         transform: translateY(-2px);
     }

     .tag-item i {
         cursor: pointer;
         font-size: 0.8rem;
         opacity: 0.7;
         transition: opacity 0.2s ease;
     }

     .tag-item i:hover {
         opacity: 1;
     }

     /* Submit Button */
     .form-submit {
         grid-column: span 2;
         display: flex;
         justify-content: flex-end;
     }

     .login-btn {
         padding: 1rem 2.5rem;
         background: linear-gradient(135deg, #3d83ff, #5a9bff);
         border: none;
         border-radius: var(--border-radius-medium);
         color: white;
         font-size: 1.1rem;
         font-weight: 500;
         cursor: pointer;
         transition: all 0.3s ease;
         box-shadow: 0 4px 15px rgba(61, 131, 255, 0.3);
         position: relative;
         overflow: hidden;
     }

     .login-btn:hover {
         transform: translateY(-3px);
         box-shadow: 0 6px 20px rgba(61, 131, 255, 0.4);
     }

     .login-btn:active {
         transform: translateY(0);
     }

     .login-btn::after {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: linear-gradient(90deg,
                 transparent,
                 rgba(255, 255, 255, 0.2),
                 transparent);
         transform: translateX(-100%);
         transition: transform 0.6s ease;
     }

     .login-btn:hover::after {
         transform: translateX(100%);
     }

     /* Responsive Design */
     @media (max-width: 992px) {
         #blog-form {
             grid-template-columns: 1fr;
         }

         .form-group.full-width {
             grid-column: span 1;
         }

         .form-submit {
             grid-column: span 1;
         }
     }

     @media (max-width: 768px) {
         #add-blog {
             padding: 1.5rem;
         }

         .admin-header {
             flex-direction: column;
             align-items: flex-start;
             gap: 1rem;
         }
     }

     /* Animation for form elements */
     .form-group {
         animation: slideUp 0.5s ease-out forwards;
         opacity: 0;
     }

     @keyframes slideUp {
         from {
             opacity: 0;
             transform: translateY(20px);
         }

         to {
             opacity: 1;
             transform: translateY(0);
         }
     }

     /* Delay animations for each form group */
     .form-group:nth-child(1) {
         animation-delay: 0.1s;
     }

     .form-group:nth-child(2) {
         animation-delay: 0.2s;
     }

     .form-group:nth-child(3) {
         animation-delay: 0.3s;
     }

     .form-group:nth-child(4) {
         animation-delay: 0.4s;
     }

     .form-group:nth-child(5) {
         animation-delay: 0.5s;
     }

     .form-group:nth-child(6) {
         animation-delay: 0.6s;
     }

     /* ==================== */
     /* SELECT INPUT STYLING */
     /* ==================== */

     .form-group select {
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
         background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233d83ff'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
         background-repeat: no-repeat;
         background-position: right 1rem center;
         background-size: 1.2rem;
         padding-right: 3rem !important;
         cursor: pointer;
     }

     /* حل مشكلة الألوان في نظام التشغيل */
     .form-group select,
     .form-group select option {
         color: #fff !important;
         background-color: #0d141a !important;
     }

     /* تحسينات إضافية للـ select */
     .form-group select {
         transition: all 0.3s ease;
         border: 1px solid rgba(61, 131, 255, 0.3) !important;
     }

     .form-group select:focus {
         border-color: #3d83ff !important;
         box-shadow: 0 0 0 3px rgba(61, 131, 255, 0.2) !important;
     }

     /* تحسينات للـ options */
     .form-group select option {
         padding: 0.5rem 1rem;
         margin: 0.3rem 0;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }

     .form-group select option:hover {
         background-color: rgba(61, 131, 255, 0.2) !important;
     }

     .form-group select option:checked {
         background-color: rgba(61, 131, 255, 0.4) !important;
         font-weight: 500;
     }

     /* تحسينات للـ select عند الـ hover */
     .form-group select:hover {
         border-color: rgba(61, 131, 255, 0.5) !important;
         background-color: rgba(255, 255, 255, 0.08) !important;
     }

     /* ==================== */
     /* تحسينات إضافية للنموذج */
     /* ==================== */

     /* تحسينات للتاريخ */
     .form-group input[type="date"] {
         position: relative;
         padding-right: 1rem;
     }

     .form-group input[type="date"]::-webkit-calendar-picker-indicator {
         filter: invert(1) brightness(0.7);
         cursor: pointer;
         padding: 0.3rem;
         border-radius: 4px;
         transition: all 0.2s ease;
     }

     .form-group input[type="date"]::-webkit-calendar-picker-indicator:hover {
         filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
         background: rgba(255, 255, 255, 0.1);
     }

     /* تحسينات للوسوم */
     .tag-input {
         position: relative;
     }

     .tag-input:after {
         content: 'Press Enter to add';
         position: absolute;
         right: 1rem;
         top: 50%;
         transform: translateY(-50%);
         font-size: 0.8rem;
         color: rgba(255, 255, 255, 0.4);
         pointer-events: none;
     }

     /* تحسينات للزر */
     .login-btn {
         position: relative;
         overflow: hidden;
         z-index: 1;
     }

     .login-btn:before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 0;
         height: 100%;
         background: linear-gradient(135deg, #5a9bff, #3d83ff);
         transition: width 0.3s ease;
         z-index: -1;
     }

     .login-btn:hover:before {
         width: 100%;
     }

     /* تحسينات للعناوين */
     .admin-title {
         position: relative;
         display: inline-block;
         padding-bottom: 0.5rem;
     }

     .admin-title:after {
         content: '';
         position: absolute;
         bottom: 0;
         left: 0;
         width: 50%;
         height: 3px;
         background: linear-gradient(90deg, #3d83ff, transparent);
         border-radius: 3px;
     }

     /* ==================== */
     /* VERTICAL BLOG FORM STYLING */
     /* ==================== */

     #add-blog {
         display: none;
         animation: fadeIn 0.5s ease-out;
         max-width: 900px;
         margin: 2rem auto;
         background: rgba(13, 20, 26, 0.9);
         border-radius: var(--border-radius-large);
         padding: 2.5rem;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
         border: 1px solid rgba(61, 131, 255, 0.2);
     }

     #blog-form {
         display: flex;
         flex-direction: column;
         gap: 2rem;
     }

     .form-group {
         position: relative;
     }

     /* Improved Input Fields */
     .form-input {
         width: 100%;
         padding: 1.2rem;
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: var(--border-radius-small);
         color: white;
         font-size: 1rem;
         transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     }

     .form-input:focus {
         border-color: #3d83ff;
         box-shadow: 0 0 0 3px rgba(61, 131, 255, 0.2);
         background: rgba(255, 255, 255, 0.08);
         outline: none;
     }

     /* Title Field */
     #blog-title {
         font-size: 1.3rem;
         font-weight: 500;
     }

     /* Image Upload - Vertical Version */
     .image-upload-vertical {
         border: 2px dashed rgba(61, 131, 255, 0.3);
         border-radius: var(--border-radius-medium);
         padding: 3rem;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         text-align: center;
         cursor: pointer;
         transition: all 0.3s ease;
         background: rgba(61, 131, 255, 0.03);
     }

     .image-upload-vertical:hover {
         border-color: #3d83ff;
         background: rgba(61, 131, 255, 0.08);
     }

     .image-upload-vertical i {
         font-size: 3rem;
         color: rgba(61, 131, 255, 0.5);
         margin-bottom: 1.5rem;
     }

     /* Enhanced Editor Container */
     .editor-container-vertical {
         background: rgba(255, 255, 255, 0.05);
         border-radius: var(--border-radius-medium);
         min-height: 500px;
         border: 1px solid rgba(255, 255, 255, 0.1);
         transition: all 0.3s ease;
         display: flex;
         flex-direction: column;
     }

     .editor-toolbar {
         padding: 1rem;
         background: rgba(0, 0, 0, 0.2);
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
         border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
     }

     .editor-content {
         flex: 1;
         padding: 1.5rem;
         overflow-y: auto;
     }

     /* Meta Fields Section */
     .meta-fields {
         display: flex;
         flex-direction: column;
         gap: 1.5rem;
         background: rgba(0, 0, 0, 0.15);
         padding: 1.5rem;
         border-radius: var(--border-radius-medium);
         margin-top: 1rem;
     }

     /* Tags - Vertical Version */
     .tag-input-vertical {
         display: flex;
         flex-wrap: wrap;
         gap: 0.8rem;
         margin-top: 1rem;
     }

     .tag-preview-vertical {
         display: flex;
         flex-wrap: wrap;
         gap: 0.8rem;
         margin-top: 1rem;
     }

     /* Submit Button - Centered */
     .form-submit-vertical {
         display: flex;
         justify-content: center;
         margin-top: 2rem;
     }

     .login-btn-vertical {
         padding: 1.2rem 3rem;
         font-size: 1.1rem;
         min-width: 200px;
     }

     /* Responsive Adjustments */
     @media (max-width: 768px) {
         #add-blog {
             padding: 1.5rem;
             border-radius: var(--border-radius-medium);
         }

         .editor-container-vertical {
             min-height: 400px;
         }

         .image-upload-vertical {
             padding: 2rem;
         }
     }

     /* Animation Enhancements */
     @keyframes fieldFocus {
         0% {
             box-shadow: 0 0 0 0 rgba(61, 131, 255, 0.4);
         }

         100% {
             box-shadow: 0 0 0 6px rgba(61, 131, 255, 0);
         }
     }

     .form-input:focus {
         animation: fieldFocus 0.5s ease-out;
     }

     /* Scrollbar for Editor */
     .editor-content::-webkit-scrollbar {
         width: 8px;
     }

     .editor-content::-webkit-scrollbar-thumb {
         background: rgba(61, 131, 255, 0.3);
         border-radius: 4px;
     }

     /* تحسينات للعناوين */
     .section-title {
         font-size: 2rem;
         margin-bottom: 1.5rem;
     }

     /* تحسينات للبحث والتصفية */
     .search-filter {
         display: flex;
         gap: 1rem;
         flex-wrap: wrap;
         margin-bottom: 1.5rem;
     }

     .search-filter input,
     .search-filter select {
         flex: 1;
         min-width: 200px;
     }


     :root {
         --primary: #3d83ff;
         --text-color: #fff;
         --border-radius-large: 25px;
         --border-radius-medium: 15px;
         --border-radius-small: 10px;
         --card-bg: rgba(255, 255, 255, 0.03);
     }

     /* التنسيقات العامة */
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         font-family: "Space Grotesk", sans-serif;
         scroll-behavior: smooth;
     }

     body {
         background: linear-gradient(to bottom, #0b0b0b 0%, #112233 50%, #0d141a 100%);
         color: #fff;
         min-height: 100vh;
         overflow-x: hidden;
     }

     /* قسم إدارة المدونات */
     .blog-management {
         width: 95%;
         margin: 2rem auto;
         padding: 2rem;
         background: rgba(13, 20, 26, 0.9);
         border-radius: var(--border-radius-large);
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
         border: 1px solid rgba(61, 131, 255, 0.2);
     }

     /* شريط الأدوات العلوي */
     .management-header {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         align-items: center;
         gap: 1.5rem;
         margin-bottom: 2rem;
         padding-bottom: 1.5rem;
         border-bottom: 1px solid rgba(61, 131, 255, 0.2);
     }

     .management-title {
         font-size: 2rem;
         background: linear-gradient(90deg, #3d83ff, #6ba8ff);
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
         text-shadow: 0 2px 10px rgba(61, 131, 255, 0.3);
     }

     /* أزرار الإدارة */
     .management-actions {
         display: flex;
         gap: 1rem;
         flex-wrap: wrap;
     }

     .action-btn {
         padding: 0.7rem 1.5rem;
         border-radius: var(--border-radius-small);
         text-decoration: none;
         font-weight: 500;
         transition: all 0.3s ease;
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
     }

     .primary-btn {
         background-color: #3d84ffc2;
         color: #fff;
         filter: drop-shadow(0 0 10px #3d84ffb9);
     }

     .primary-btn:hover {
         background-color: rgba(61, 132, 255, 0.914);
         transform: translateY(-2px);
     }

     .secondary-btn {
         background: rgba(255, 255, 255, 0.1);
         color: #fff;
         border: 1px solid rgba(255, 255, 255, 0.2);
     }

     .secondary-btn:hover {
         background: rgba(255, 255, 255, 0.15);
     }

     /* شريط البحث والتصفية */
     .search-filter-bar {
         display: flex;
         flex-wrap: wrap;
         gap: 1rem;
         margin-bottom: 2rem;
     }

     .search-input {
         flex: 1;
         min-width: 250px;
         padding: 0.8rem 1.2rem;
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: var(--border-radius-small);
         color: white;
         font-size: 1rem;
     }

     .filter-select {
         padding: 0.8rem 1.2rem;
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: var(--border-radius-small);
         color: white;
         min-width: 180px;
     }

     /* جدول المدونات */
     .posts-table-container {
         overflow-x: auto;
         margin-bottom: 2rem;
         background: var(--card-bg);
         border-radius: var(--border-radius-medium);
         padding: 1rem;
     }

     .posts-table {
         width: 100%;
         border-collapse: collapse;
         min-width: 800px;
     }

     .posts-table th {
         background: rgba(61, 131, 255, 0.2);
         padding: 1rem;
         text-align: left;
         color: #3d83ff;
         position: sticky;
         top: 0;
     }

     .posts-table td {
         padding: 1rem;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }

     .post-status {
         display: inline-block;
         padding: 0.3rem 0.8rem;
         border-radius: 20px;
         font-size: 0.85rem;
         font-weight: 500;
     }

     .status-published {
         background: rgba(76, 175, 80, 0.2);
         color: #4CAF50;
     }

     .status-draft {
         background: rgba(255, 193, 7, 0.2);
         color: #FFC107;
     }

     /* أزرار الإجراءات */
     .table-actions {
         display: flex;
         gap: 0.5rem;
     }

     .table-action-btn {
         padding: 0.5rem;
         border-radius: 50%;
         width: 35px;
         height: 35px;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all 0.2s ease;
     }

     .edit-btn {
         background: rgba(76, 175, 80, 0.1);
         color: #4CAF50;
     }

     .edit-btn:hover {
         background: rgba(76, 175, 80, 0.2);
     }

     .delete-btn {
         background: rgba(244, 67, 54, 0.1);
         color: #F44336;
     }

     .delete-btn:hover {
         background: rgba(244, 67, 54, 0.2);
     }

     .view-btn {
         background: rgba(33, 150, 243, 0.1);
         color: #2196F3;
     }

     .view-btn:hover {
         background: rgba(33, 150, 243, 0.2);
     }

     /* تذييل الجدول */
     .table-footer {
         display: flex;
         justify-content: space-between;
         align-items: center;
         flex-wrap: wrap;
         gap: 1rem;
         margin-top: 1.5rem;
     }

     .pagination {
         display: flex;
         gap: 0.5rem;
     }

     .page-btn {
         padding: 0.5rem 0.8rem;
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: var(--border-radius-small);
         color: white;
         cursor: pointer;
     }

     .page-btn.active {
         background: rgba(61, 131, 255, 0.3);
         color: #3d83ff;
     }

     .page-btn:hover:not(.active) {
         background: rgba(255, 255, 255, 0.1);
     }

     /* عرض البطاقات للشاشات الصغيرة */
     @media (max-width: 768px) {
         .posts-table-container {
             display: none;
         }

         .mobile-posts-list {
             display: block;
         }

         .management-header {
             flex-direction: column;
             align-items: flex-start;
         }

         .management-actions {
             width: 100%;
             justify-content: space-between;
         }

         .action-btn {
             flex: 1;
             text-align: center;
             justify-content: center;
         }
     }

     /* قائمة البطاقات للجوال */
     .mobile-posts-list {
         display: none;
     }

     .mobile-post-card {
         background: var(--card-bg);
         border-radius: var(--border-radius-medium);
         padding: 1.5rem;
         margin-bottom: 1.5rem;
         position: relative;
     }

     .mobile-post-title {
         font-size: 1.2rem;
         margin-bottom: 0.5rem;
         color: #fff;
     }

     .mobile-post-meta {
         display: flex;
         flex-wrap: wrap;
         gap: 1rem;
         margin-bottom: 1rem;
         color: #bbb;
         font-size: 0.9rem;
     }

     .mobile-post-actions {
         display: flex;
         gap: 0.5rem;
         justify-content: flex-end;
     }

     /* نموذج إضافة/تعديل المدونة */
     .blog-form-container {
         background: rgba(13, 20, 26, 0.9);
         border-radius: var(--border-radius-large);
         padding: 2rem;
         margin-top: 2rem;
         border: 1px solid rgba(61, 131, 255, 0.2);
     }

     .blog-form {
         display: flex;
         flex-direction: column;
         gap: 1.5rem;
     }

     .form-row {
         display: flex;
         flex-wrap: wrap;
         gap: 1.5rem;
     }

     .form-group {
         flex: 1;
         min-width: 250px;
     }

     .form-label {
         display: block;
         margin-bottom: 0.8rem;
         color: rgba(255, 255, 255, 0.9);
         font-weight: 500;
     }

     .form-input,
     .form-select,
     .form-textarea {
         width: 100%;
         padding: 1rem;
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: var(--border-radius-small);
         color: white;
         font-size: 1rem;
         transition: all 0.3s ease;
     }

     .form-input:focus,
     .form-select:focus,
     .form-textarea:focus {
         outline: none;
         border-color: #3d83ff;
         box-shadow: 0 0 0 3px rgba(61, 131, 255, 0.2);
         background: rgba(255, 255, 255, 0.08);
     }

     .form-textarea {
         min-height: 200px;
         resize: vertical;
     }

     .form-full-width {
         width: 100%;
         flex: 0 0 100%;
     }

     /* تحسينات الـ select */
     .form-select {
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
         background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233d83ff'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
         background-repeat: no-repeat;
         background-position: right 1rem center;
         background-size: 1.2rem;
         padding-right: 3rem !important;
     }

     /* تحميل الصورة */
     .image-upload {
         border: 2px dashed rgba(61, 131, 255, 0.3);
         border-radius: var(--border-radius-medium);
         padding: 2rem;
         text-align: center;
         cursor: pointer;
         transition: all 0.3s ease;
         background: rgba(61, 131, 255, 0.03);
     }

     .image-upload:hover {
         border-color: #3d83ff;
         background: rgba(61, 131, 255, 0.08);
     }

     .image-preview {
         max-width: 100%;
         max-height: 300px;
         border-radius: var(--border-radius-small);
         margin-top: 1rem;
         display: none;
     }

     /* الوسوم */
     .tags-container {
         display: flex;
         flex-wrap: wrap;
         gap: 0.5rem;
         margin-top: 1rem;
     }

     .tag-item {
         background: rgba(61, 131, 255, 0.2);
         color: #3d83ff;
         padding: 0.5rem 1rem;
         border-radius: 20px;
         font-size: 0.85rem;
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
     }

     .remove-tag {
         cursor: pointer;
         font-size: 0.8rem;
         opacity: 0.7;
         transition: opacity 0.2s ease;
     }

     .remove-tag:hover {
         opacity: 1;
     }

     /* أزرار النموذج */
     .form-actions {
         display: flex;
         justify-content: flex-end;
         gap: 1rem;
         margin-top: 1.5rem;
     }

     /* تحسينات للشاشات الصغيرة */
     @media (max-width: 768px) {
         .blog-form-container {
             padding: 1.5rem;
         }

         .form-row {
             flex-direction: column;
             gap: 1rem;
         }

         .form-group {
             min-width: 100%;
         }

         .form-actions {
             flex-direction: column;
         }

         .form-actions .action-btn {
             width: 100%;
         }
     }

     /* ===== تحسينات الجدول الرئيسي ===== */
     .posts-table-container {
         overflow-x: auto;
         background: var(--card-bg);
         border-radius: var(--border-radius-medium);
         padding: 1rem;
         margin: 2rem 0;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
     }

     .posts-table {
         width: 100%;
         min-width: 600px;
         border-collapse: collapse;
     }

     .posts-table th {
         background: rgba(61, 131, 255, 0.2);
         padding: 1.2rem;
         text-align: left;
         color: #3d83ff;
         font-weight: 600;
         position: sticky;
         top: 0;
         backdrop-filter: blur(10px);
     }

     .posts-table td {
         padding: 1.2rem;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
         vertical-align: middle;
     }

     .posts-table tr:last-child td {
         border-bottom: none;
     }

     .posts-table tr:hover td {
         background: rgba(61, 131, 255, 0.05);
     }

     /* تحسينات حالة المقال */
     .post-status {
         display: inline-block;
         padding: 0.4rem 1rem;
         border-radius: 20px;
         font-size: 0.85rem;
         font-weight: 500;
     }

     .status-published {
         background: rgba(76, 175, 80, 0.15);
         color: #4CAF50;
     }

     .status-draft {
         background: rgba(255, 193, 7, 0.15);
         color: #FFC107;
     }

     /* تحسينات أزرار الإجراءات */
     .table-actions {
         display: flex;
         gap: 0.5rem;
     }

     .action-btn {
         padding: 0.6rem 1rem;
         border-radius: var(--border-radius-small);
         font-size: 0.9rem;
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         transition: all 0.2s ease;
     }

     .edit-btn {
         background: rgba(76, 175, 80, 0.1);
         color: #4CAF50;
         border: 1px solid rgba(76, 175, 80, 0.2);
     }

     .edit-btn:hover {
         background: rgba(76, 175, 80, 0.2);
         transform: translateY(-2px);
     }

     .delete-btn {
         background: rgba(244, 67, 54, 0.1);
         color: #F44336;
         border: 1px solid rgba(244, 67, 54, 0.2);
     }

     .delete-btn:hover {
         background: rgba(244, 67, 54, 0.2);
         transform: translateY(-2px);
     }

     /* ===== عرض الجوال ===== */
     .mobile-posts-list {
         display: none;
     }

     .mobile-post-card {
         background: var(--card-bg);
         border-radius: var(--border-radius-medium);
         padding: 1.5rem;
         margin-bottom: 1.5rem;
         transition: all 0.3s ease;
     }

     .mobile-post-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 5px 15px rgba(61, 131, 255, 0.1);
     }

     .mobile-post-header {
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
         margin-bottom: 1rem;
     }

     .mobile-post-title {
         font-size: 1.2rem;
         color: #fff;
         font-weight: 500;
         flex: 1;
     }

     .mobile-post-status {
         margin-left: 1rem;
         font-size: 0.8rem;
     }

     .mobile-post-meta {
         display: flex;
         flex-wrap: wrap;
         gap: 1rem;
         color: #bbb;
         font-size: 0.9rem;
         margin-bottom: 1.5rem;
     }

     .mobile-post-actions {
         display: flex;
         gap: 0.5rem;
         justify-content: flex-end;
     }

     /* ===== تحسينات شريط الأدوات ===== */
     .management-tools {
         display: flex;
         flex-wrap: wrap;
         gap: 1rem;
         margin-bottom: 2rem;
     }

     .search-input {
         flex: 1;
         min-width: 250px;
         padding: 0.8rem 1.2rem;
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: var(--border-radius-small);
         color: white;
         font-size: 1rem;
         transition: all 0.3s ease;
     }

     .search-input:focus {
         border-color: #3d83ff;
         box-shadow: 0 0 0 3px rgba(61, 131, 255, 0.2);
         outline: none;
     }

     .filter-select {
         padding: 0.8rem 1.2rem;
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: var(--border-radius-small);
         color: white;
         min-width: 180px;
         transition: all 0.3s ease;
     }

     .filter-select:focus {
         border-color: #3d83ff;
         box-shadow: 0 0 0 3px rgba(61, 131, 255, 0.2);
         outline: none;
     }

     .add-blog-btn  , .back-btn  {
         padding: 0.8rem 1.5rem;
         background: rgba(61, 131, 255, 0.2);
         color: #3d83ff;
         border-radius: var(--border-radius-small);
         text-decoration: none;
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         transition: all 0.3s ease;
         font-weight: 500;
     }

     .add-blog-btn:hover  , .back-btn:hover{
         background: rgba(61, 131, 255, 0.3);
         transform: translateY(-2px);
     }

     /* ===== التكيف مع الشاشات الصغيرة ===== */
     @media (max-width: 768px) {
         .posts-table-container {
             display: none;
         }

         .mobile-posts-list {
             display: block;
         }

         .management-header {
             flex-direction: column;
             align-items: stretch;
             gap: 1.5rem;
         }

         .management-tools {
             flex-direction: column;
         }

         .search-input,
         .filter-select,
         .add-blog-btn {
             width: 100%;
         }

         .mobile-post-actions .action-btn {
             padding: 0.5rem;
             flex: 1;
             text-align: center;
             justify-content: center;
         }
     }

     /* ===== تأثيرات إضافية ===== */
     @keyframes fadeIn {
         from {
             opacity: 0;
             transform: translateY(10px);
         }

         to {
             opacity: 1;
             transform: translateY(0);
         }
     }

     .posts-table tr {
         animation: fadeIn 0.3s ease forwards;
         opacity: 0;
     }

     .posts-table tr:nth-child(1) {
         animation-delay: 0.1s;
     }

     .posts-table tr:nth-child(2) {
         animation-delay: 0.2s;
     }

     .posts-table tr:nth-child(3) {
         animation-delay: 0.3s;
     }

     .posts-table tr:nth-child(4) {
         animation-delay: 0.4s;
     }

     .posts-table tr:nth-child(5) {
         animation-delay: 0.5s;
     }

     /* ===== شريط التمرير المخصص ===== */
     .posts-table-container::-webkit-scrollbar {
         height: 8px;
     }

     .posts-table-container::-webkit-scrollbar-thumb {
         background: rgba(61, 131, 255, 0.3);
         border-radius: 4px;
     }

     .posts-table-container::-webkit-scrollbar-track {
         background: rgba(255, 255, 255, 0.05);
         border-radius: 4px;
     }

     /* Loading Spinner */
     .loading-spinner {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.7);
         z-index: 9999;
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .spinner {
         width: 50px;
         height: 50px;
         border: 5px solid rgba(255, 255, 255, 0.3);
         border-radius: 50%;
         border-top-color: var(--primary);
         animation: spin 1s ease-in-out infinite;
     }

     @keyframes spin {
         to {
             transform: rotate(360deg);
         }
     }

     /* Toast Notifications */
     .toast-container {
         position: fixed;
         bottom: 20px;
         right: 20px;
         z-index: 9998;
         display: flex;
         flex-direction: column;
         gap: 10px;
     }

     .toast {
         padding: 15px 20px;
         border-radius: var(--border-radius-small);
         color: white;
         display: flex;
         align-items: center;
         gap: 10px;
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
         transform: translateX(150%);
         transition: transform 0.3s ease-out;
         max-width: 350px;
     }

     .toast.show {
         transform: translateX(0);
     }

     .toast.success {
         background: rgba(76, 175, 80, 0.9);
         border-left: 4px solid #4CAF50;
     }

     .toast.error {
         background: rgba(244, 67, 54, 0.9);
         border-left: 4px solid #F44336;
     }

     .toast.warning {
         background: rgba(255, 193, 7, 0.9);
         border-left: 4px solid #FFC107;
     }

     .toast i {
         font-size: 1.2rem;
     }

     .toast .close-btn {
         margin-left: auto;
         cursor: pointer;
         opacity: 0.7;
         transition: opacity 0.2s;
     }

     .toast .close-btn:hover {
         opacity: 1;
     }

     /* Image Preview Styles */
     .image-preview-container {
         display: flex;
         align-items: center;
         gap: 10px;
         margin-top: 10px;
     }

     #imagePreview {
         display: none;
         max-width: 50px;
         max-height: 50px;
         border-radius: var(--border-radius-small);
         border: 1px solid rgba(255, 255, 255, 0.1);
         object-fit: cover;
     }

     #clearImageBtn {
         background: none;
         border: none;
         color: #f44336;
         cursor: pointer;
         font-size: 0.9rem;
         display: none;
         padding: 5px;
         border-radius: 4px;
     }

     #clearImageBtn:hover {
         background: rgba(244, 67, 54, 0.1);
     }

     /* Tags Input Styles */
     .tags-input-container {
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: var(--border-radius-small);
         padding: 8px 12px;
         background: rgba(255, 255, 255, 0.05);
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
         align-items: center;
         min-height: 50px;
     }

     .tags-display {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
     }

     .tags-input {
         flex: 1;
         min-width: 120px;
         background: transparent;
         border: none;
         color: white;
         padding: 8px 0;
         outline: none;
     }

     .tag-item {
         background: rgba(61, 131, 255, 0.2);
         color: #3d83ff;
         padding: 6px 12px;
         border-radius: 20px;
         font-size: 0.85rem;
         display: inline-flex;
         align-items: center;
         gap: 6px;
         animation: fadeIn 0.3s ease;
     }

     .tag-item .remove-tag {
         cursor: pointer;
         font-size: 0.8rem;
         opacity: 0.7;
         transition: opacity 0.2s;
         display: flex;
         align-items: center;
     }

     .tag-item .remove-tag:hover {
         opacity: 1;
     }

     .hint {
         color: #888;
         font-size: 0.8rem;
         margin-top: 5px;
         display: block;
     }

     @keyframes fadeIn {
         from {
             opacity: 0;
             transform: translateY(5px);
         }

         to {
             opacity: 1;
             transform: translateY(0);
         }
     }

     /* Input Method Toggle */
     .input-method-toggle {
         display: flex;
         gap: 1rem;
         margin-top: 0.5rem;
     }

     .toggle-option {
         display: flex;
         align-items: center;
         gap: 0.5rem;
         cursor: pointer;
         padding: 0.5rem 1rem;
         border-radius: var(--border-radius-small);
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(255, 255, 255, 0.1);
         transition: all 0.3s ease;
     }

     .toggle-option input[type="radio"] {
         margin: 0;
     }

     .toggle-option:hover {
         background: rgba(255, 255, 255, 0.1);
     }

     .toggle-option input:checked+span {
         color: #3d83ff;
     }

     /* Paragraphs Input */
     .paragraphs-list {
         display: flex;
         flex-direction: column;
         gap: 1rem;
         margin-bottom: 1rem;
     }

     .paragraph-item {
         display: flex;
         gap: 0.5rem;
     }

     .paragraph-input {
         flex: 1;
         padding: 1rem;
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: var(--border-radius-small);
         color: white;
         font-size: 1rem;
         transition: all 0.3s ease;
     }

     .paragraph-input:focus {
         outline: none;
         border-color: #3d83ff;
         box-shadow: 0 0 0 3px rgba(61, 131, 255, 0.2);
         background: rgba(255, 255, 255, 0.08);
     }

     .remove-paragraph-btn {
         background: rgba(244, 67, 54, 0.1);
         color: #F44336;
         border: 1px solid rgba(244, 67, 54, 0.2);
         border-radius: var(--border-radius-small);
         width: 40px;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: all 0.2s ease;
     }

     .remove-paragraph-btn:hover {
         background: rgba(244, 67, 54, 0.2);
     }

     .secondary-btn {
         background: rgba(255, 255, 255, 0.1);
         color: #fff;
         border: 1px solid rgba(255, 255, 255, 0.2);
         padding: 0.7rem 1.5rem;
         border-radius: var(--border-radius-small);
         cursor: pointer;
         transition: all 0.3s ease;
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
     }

     .secondary-btn:hover {
         background: rgba(255, 255, 255, 0.15);
     }

     /* Enhanced Input Method Toggle */
     .input-method-toggle {
         display: flex;
         gap: 1rem;
         margin-top: 0.5rem;
     }

     .toggle-option {
         display: flex;
         align-items: center;
         gap: 0.8rem;
         cursor: pointer;
         padding: 0.8rem 1.2rem;
         border-radius: var(--border-radius-small);
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(255, 255, 255, 0.1);
         transition: all 0.3s ease;
         position: relative;
     }

     .toggle-option input[type="radio"] {
         position: absolute;
         opacity: 0;
         width: 0;
         height: 0;
     }

     .custom-radio {
         width: 18px;
         height: 18px;
         border-radius: 50%;
         border: 2px solid rgba(255, 255, 255, 0.3);
         display: inline-block;
         position: relative;
         transition: all 0.3s ease;
     }

     .toggle-option input:checked+.custom-radio {
         border-color: #3d83ff;
         background-color: rgba(61, 131, 255, 0.2);
     }

     .toggle-option input:checked+.custom-radio::after {
         content: '';
         position: absolute;
         width: 10px;
         height: 10px;
         border-radius: 50%;
         background: #3d83ff;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
     }

     .toggle-option:hover {
         background: rgba(255, 255, 255, 0.1);
         transform: translateY(-2px);
     }

     .toggle-option input:checked~span:last-child {
         color: #3d83ff;
     }

     /* Enhanced Paragraphs Input */
     .paragraphs-list {
         display: flex;
         flex-direction: column;
         gap: 1.5rem;
         margin-bottom: 1.5rem;
     }

     .paragraph-item {
         display: flex;
         flex-direction: column;
         gap: 0.5rem;
         background: rgba(255, 255, 255, 0.03);
         border-radius: var(--border-radius-small);
         padding: 1rem;
         border: 1px solid rgba(255, 255, 255, 0.05);
         transition: all 0.3s ease;
         position: relative;
     }

     .paragraph-item:hover {
         border-color: rgba(61, 131, 255, 0.3);
     }

     .paragraph-header {
         display: flex;
         gap: 0.5rem;
         align-items: center;
     }

     .paragraph-title-input {
         flex: 1;
         padding: 0.8rem;
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: var(--border-radius-small);
         color: white;
         font-size: 1rem;
         transition: all 0.3s ease;
     }

     .paragraph-title-input:focus {
         outline: none;
         border-color: #3d83ff;
         box-shadow: 0 0 0 3px rgba(61, 131, 255, 0.1);
     }

     .paragraph-title-input::placeholder {
         color: rgba(255, 255, 255, 0.3);
     }

     .paragraph-content {
         display: flex;
         gap: 0.5rem;
     }

     .paragraph-input {
         flex: 1;
         padding: 1rem;
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: var(--border-radius-small);
         color: white;
         font-size: 1rem;
         min-height: 100px;
         transition: all 0.3s ease;
         resize: vertical;
     }

     .paragraph-input:focus {
         outline: none;
         border-color: #3d83ff;
         box-shadow: 0 0 0 3px rgba(61, 131, 255, 0.2);
         background: rgba(255, 255, 255, 0.08);
     }

     .paragraph-actions {
         display: flex;
         gap: 0.5rem;
         position: absolute;
         top: 1rem;
         right: 1rem;
     }

     .paragraph-btn {
         width: 32px;
         height: 32px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: all 0.2s ease;
         background: rgba(255, 255, 255, 0.05);
         border: none;
         color: rgba(255, 255, 255, 0.7);
     }

     .paragraph-btn:hover {
         background: rgba(255, 255, 255, 0.1);
         color: white;
     }

     .move-up-btn:hover {
         color: #4CAF50;
     }

     .move-down-btn:hover {
         color: #2196F3;
     }

     .remove-paragraph-btn:hover {
         color: #F44336;
     }

     /* Drag and drop styling */
     .paragraph-item.dragging {
         opacity: 0.5;
         border: 1px dashed #3d83ff;
     }

     .paragraph-item.drag-over {
         border: 1px dashed #3d83ff;
         background: rgba(61, 131, 255, 0.05);
     }

     /* Input Method Toggle */
     .input-method-toggle {
         display: flex;
         gap: 1rem;
         margin: 0.5rem 0 1rem;
     }

     .toggle-option {
         display: flex;
         align-items: center;
         gap: 0.8rem;
         cursor: pointer;
         padding: 0.8rem 1.5rem;
         border-radius: var(--border-radius-small);
         background: rgba(255, 255, 255, 0.03);
         border: 1px solid rgba(61, 131, 255, 0.3);
         transition: all 0.3s ease;
         position: relative;
         flex: 1;
         text-align: center;
         justify-content: center;
     }

     .toggle-option:hover {
         background: rgba(61, 131, 255, 0.1);
     }

     .toggle-option input[type="radio"] {
         position: absolute;
         opacity: 0;
     }

     .custom-radio {
         width: 18px;
         height: 18px;
         border-radius: 50%;
         border: 2px solid rgba(61, 131, 255, 0.5);
         display: inline-block;
         transition: all 0.3s ease;
     }

     .toggle-option input:checked+.custom-radio {
         background-color: rgba(61, 131, 255, 0.2);
         border-color: #3d83ff;
     }

     .toggle-option input:checked+.custom-radio::after {
         content: '';
         position: absolute;
         width: 10px;
         height: 10px;
         background: #3d83ff;
         border-radius: 50%;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
     }

     .toggle-option input:checked~span:last-child {
         color: #3d83ff;
         font-weight: 500;
     }

     .method-description {
         color: #aaa;
         font-size: 0.9rem;
         margin-top: 0.5rem;
         padding: 0.5rem;
         border-radius: var(--border-radius-small);
         background: rgba(255, 255, 255, 0.03);
     }

     /* Paragraph Styles */
     .paragraphs-list {
         display: flex;
         flex-direction: column;
         gap: 1.5rem;
         margin: 1.5rem 0;
     }

     .paragraph-item {
         display: flex;
         gap: 1rem;
         background: rgba(13, 20, 26, 0.7);
         border-radius: var(--border-radius-medium);
         padding: 1.5rem;
         border: 1px solid rgba(61, 131, 255, 0.15);
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         transition: all 0.3s ease;
         position: relative;
     }

     .paragraph-item:hover {
         border-color: rgba(61, 131, 255, 0.3);
         box-shadow: 0 4px 15px rgba(61, 131, 255, 0.1);
     }

     .paragraph-content-wrapper {
         flex: 1;
         display: flex;
         flex-direction: column;
         gap: 1rem;
     }

     .paragraph-title-input {
         width: 100%;
         padding: 0.8rem 1rem;
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: var(--border-radius-small);
         color: white;
         font-size: 1rem;
         transition: all 0.3s ease;
     }

     .paragraph-title-input:focus {
         outline: none;
         border-color: #3d83ff;
         box-shadow: 0 0 0 3px rgba(61, 131, 255, 0.2);
     }

     .paragraph-title-input::placeholder {
         color: rgba(255, 255, 255, 0.3);
         font-style: italic;
     }

     .paragraph-input {
         width: 100%;
         padding: 1.2rem;
         background: rgba(255, 255, 255, 0.03);
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: var(--border-radius-small);
         color: white;
         font-size: 1rem;
         min-height: 120px;
         resize: vertical;
         line-height: 1.6;
         transition: all 0.3s ease;
     }

     .paragraph-input:focus {
         outline: none;
         border-color: #3d83ff;
         box-shadow: 0 0 0 3px rgba(61, 131, 255, 0.2);
         background: rgba(255, 255, 255, 0.05);
     }

     /* Controls on the right side */
     .paragraph-controls {
         display: flex;
         flex-direction: column;
         gap: 0.5rem;
         width: 40px;
         padding-top: 2.5rem;
     }

     .paragraph-btn {
         width: 40px;
         height: 40px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: all 0.2s ease;
         background: rgba(61, 131, 255, 0.1);
         border: none;
         color: rgba(255, 255, 255, 0.7);
     }

     .paragraph-btn:hover {
         background: rgba(61, 131, 255, 0.3);
         color: white;
         transform: translateY(-1px);
     }

     .paragraph-btn:disabled {
         opacity: 0.3;
         cursor: not-allowed;
         background: rgba(255, 255, 255, 0.05);
     }

     .paragraph-btn i {
         font-size: 0.9rem;
     }

     .add-paragraph-btn {
         width: 100%;
         padding: 1rem;
         background: rgba(61, 131, 255, 0.1);
         color: #3d83ff;
         border: 1px dashed rgba(61, 131, 255, 0.3);
         border-radius: var(--border-radius-medium);
         font-size: 1rem;
         cursor: pointer;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 0.8rem;
     }

     .add-paragraph-btn:hover {
         background: rgba(61, 131, 255, 0.2);
         border-style: solid;
     }

     /* Drag and drop effects */
     .paragraph-item.dragging {
         opacity: 0.5;
         border: 1px dashed #3d83ff;
         background: rgba(61, 131, 255, 0.05);
     }

     .paragraph-item.drag-over {
         border: 1px dashed #3d83ff;
         background: rgba(61, 131, 255, 0.05);
     }

     /* Language Tabs */
     .lang-tabs {
         display: flex;
         margin-bottom: 1rem;
         border-bottom: 1px solid rgba(61, 131, 255, 0.15);
     }

     .lang-tab {
         padding: 0.8rem 1.5rem;
         cursor: pointer;
         border-radius: 5px 5px 0 0;

         transition: all 0.3s ease;
         font-weight: 500;
         color: rgba(255, 255, 255, 0.7);
     }

     .lang-tab.active {
         color: #3d83ff;
         background: rgba(61, 131, 255, 0.1);
     }

     .lang-tab.active::after {
         content: '';
         position: absolute;
         bottom: -1px;
         left: 0;
         width: 100%;
         height: 3px;

         background: #3d83ff;
     }

     .lang-content {
         display: none;
     }

     .lang-content.active {
         display: block;
     }

     /* Update Paragraph Item to Accommodate Tabs */
     .paragraph-item {
         display: flex;
         flex-direction: column;
         gap: 1rem;
         background: rgba(13, 20, 26, 0.7);
         border-radius: var(--border-radius-medium);
         padding: 1.5rem;
         border: 1px solid rgba(61, 131, 255, 0.15);
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         transition: all 0.3s ease;
         position: relative;
     }

     .paragraph-item:hover {
         border-color: rgba(61, 131, 255, 0.3);
         box-shadow: 0 4px 15px rgba(61, 131, 255, 0.1);
     }

     /* Ensure Paragraph Controls Stay on the Right */
     .paragraph-controls {
         display: flex;
         flex-direction: column;
         gap: 0.5rem;
         position: absolute;
         top: 1.5rem;
         right: 1.5rem;
         width: 40px;
     }

     /* Update Add Paragraph Button (to match your design) */
     .add-paragraph-btn {
         width: 100%;
         padding: 1rem;
         background: rgba(61, 131, 255, 0.1);
         color: #3d83ff;
         border: 1px dashed rgba(61, 131, 255, 0.3);
         border-radius: var(--border-radius-medium);
         font-size: 1rem;
         cursor: pointer;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 0.8rem;
     }

     .add-paragraph-btn:hover {
         background: rgba(61, 131, 255, 0.2);
         border-style: solid;
         transform: translateY(-3px);
     }

     /* Enhanced Card Styling */
     .paragraph-item {
         display: flex;
         flex-direction: column;
         gap: 1rem;
         background: rgba(13, 20, 26, 0.9);
         border-radius: 10px;
         padding: 1.5rem;
         border: 1px solid rgba(61, 131, 255, 0.2);
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
         transition: all 0.3s ease;
         position: relative;
         margin-right: 60px;
         /* Space for controls on the left */
     }

     .paragraph-item:hover {
         border-color: rgba(61, 131, 255, 0.4);
         box-shadow: 0 6px 20px rgba(61, 131, 255, 0.2);
     }

     /* Language Tabs */
     .lang-tabs {
         display: flex;
         margin-bottom: 1rem;
         border-bottom: 1px solid rgba(61, 131, 255, 0.15);
     }

     .lang-tab {
         padding: 0.8rem 1.5rem;
         cursor: pointer;
         border-radius: 5px 5px 0 0;
         transition: all 0.3s ease;
         font-weight: 500;
         color: rgba(255, 255, 255, 0.7);
         background: transparent;
     }

     .lang-tab.active {
         color: #3d83ff;
         background: rgba(61, 131, 255, 0.1);
     }

     .lang-tab.active::after {
         content: '';
         position: absolute;
         bottom: -1px;
         left: 0;
         width: 100%;
         height: 3px;
         background: #3d83ff;
     }

     .lang-content {
         display: none;
     }

     .lang-content.active {
         display: block;
     }

     .paragraph-title-input,
     .paragraph-input {
         width: 100%;
         padding: 1rem;
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: 5px;
         color: white;
         font-size: 1rem;
         transition: all 0.3s ease;
         margin: 1rem 0;
     }

     .paragraph-title-input:focus,
     .paragraph-input:focus {
         outline: none;
         border-color: #3d83ff;
         box-shadow: 0 0 0 3px rgba(61, 131, 255, 0.2);
         background: rgba(255, 255, 255, 0.08);
     }

     .paragraph-title-input::placeholder,
     .paragraph-input::placeholder {
         color: rgba(255, 255, 255, 0.3);
     }

     /* Move Controls Outside on the Left */
     .paragraph-controls {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         gap: 0.5rem;
         position: absolute;
         right: -60px;
         top: 50%;
         transform: translateY(-50%);
         width: 50px;
         background: rgba(13, 20, 26, 0.9);
         padding: 1rem;
         border-radius: 5px;
         border: 1px solid rgba(61, 131, 255, 0.2);
     }

     .paragraph-btn {
         width: 36px;
         height: 36px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: all 0.2s ease;
         background: rgba(61, 131, 255, 0.1);
         border: none;
         color: rgba(255, 255, 255, 0.7);
         font-size: 0.9rem;
     }

     .paragraph-btn:hover {
         background: rgba(61, 131, 255, 0.3);
         color: white;
     }

     .paragraph-btn:disabled {
         opacity: 0.3;
         cursor: not-allowed;
         background: rgba(255, 255, 255, 0.05);
     }

     /* Add Paragraph Button */
     .add-paragraph-btn {
         width: 100%;
         padding: 1rem;
         background: rgba(61, 131, 255, 0.1);
         color: #3d83ff;
         border: 1px dashed rgba(61, 131, 255, 0.3);
         border-radius: 10px;
         font-size: 1rem;
         cursor: pointer;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 0.8rem;
         margin-top: 1rem;
     }

     .add-paragraph-btn:hover {
         background: rgba(61, 131, 255, 0.2);
         border-style: solid;
         transform: translateY(-3px);
     }

     .lang-tabs {
         display: flex;
         margin-bottom: 1rem;
         border-bottom: 1px solid rgba(61, 131, 255, 0.15);
     }

     .lang-tab {
         padding: 0.8rem 1.5rem;
         cursor: pointer;
         border-radius: 5px 5px 0 0;
         transition: all 0.3s ease;
         font-weight: 500;
         color: rgba(255, 255, 255, 0.7);
         background: transparent;
     }

     .lang-tab.active {
         color: #3d83ff;
         background: rgba(61, 131, 255, 0.1);
     }

     .lang-tab.active::after {
         content: '';
         position: absolute;
         bottom: -1px;
         left: 0;
         width: 100%;
         height: 3px;
         background: #3d83ff;
     }

     .lang-content {
         display: none;
     }

     .lang-content.active {
         display: block;
     }

     /* استايل العداد (Counter) */
     .card-counter {
         position: absolute;
         top: 0;
         right: -3.4rem;
         background: rgba(61, 131, 255, 0.2);
         color: #3d83ff;
         padding: 0.5rem 1rem;
         border-radius: 5px;
         font-weight: 600;
         font-size: 1rem;
     }

     /* استايل التبويبات (Tabs) */
     .lang-tabs {
         display: flex;
         margin-bottom: 1rem;
         border-bottom: 1px solid rgba(61, 131, 255, 0.15);
     }

     .lang-tab {
         padding: 0.8rem 1.5rem;
         cursor: pointer;
         border-radius: 5px 5px 0 0;
         transition: all 0.3s ease;
         font-weight: 500;
         color: rgba(255, 255, 255, 0.7);
         background: transparent;
     }

     .lang-tab.active {
         color: #3d83ff;
         background: rgba(61, 131, 255, 0.1);
     }

     .lang-tab.active::after {
         content: '';
         position: absolute;
         bottom: -1px;
         left: 0;
         width: 100%;
         height: 3px;
         background: #3d83ff;
     }

     .lang-content {
         display: none;
     }

     .lang-content.active {
         display: block;
     }

     /* تعديل حاوية المحتوى لتتناسب مع التبويبات */
     .paragraph-content-wrapper {
         flex: 1;
         display: flex;
         flex-direction: column;
         gap: 1rem;
     }

     /* أزرار الإجراءات في الجدول */
     .table-actions {
         display: flex;
         gap: 0.8rem;
         justify-content: center;
     }

     .action-btn {
         width: 36px;
         height: 36px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
         position: relative;
         overflow: hidden;
         border: none;
         color: white;
         font-size: 1rem;
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     }

     .action-btn::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(255, 255, 255, 0.1);
         transform: translateY(100%);
         transition: transform 0.3s ease;
     }

     .action-btn:hover::before {
         transform: translateY(0);
     }

     .action-btn i {
         position: relative;
         z-index: 1;
     }

     /* زر التعديل */
     .btn-edit {
         background: linear-gradient(135deg, #3d83ff, #5a9bff);
     }

     .btn-edit:hover {
         transform: translateY(-3px);
         box-shadow: 0 5px 15px rgba(61, 131, 255, 0.4);
     }

     /* زر الحذف */
     .btn-delete {
         background: linear-gradient(135deg, #ff4757, #ff6b81);
     }

     .btn-delete:hover {
         transform: translateY(-3px);
         box-shadow: 0 5px 15px rgba(255, 71, 87, 0.4);
     }

     /* تأثير النبض عند الضغط */
     .action-btn:active {
         transform: scale(0.95);
     }

     /* تأثير الإضاءة عند التحويم */
     .action-btn:hover {
         filter: brightness(1.2);
     }

     /* تأثير الإشعاع */
     .action-btn::after {
         content: '';
         position: absolute;
         top: -50%;
         left: -50%;
         width: 200%;
         height: 200%;
         background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
         opacity: 0;
         transition: opacity 0.1s ease;
     }

     .action-btn:hover::after {
         opacity: 1;
     }

     /* تأثيرات خاصة لكل زر */
     .btn-edit::after {
         background: radial-gradient(circle, rgba(61, 131, 255, 0.4) 0%, transparent 70%);
     }

     .btn-delete::after {
         background: radial-gradient(circle, rgba(255, 71, 87, 0.4) 0%, transparent 70%);
     }

     /* أيقونات الأزرار */
     .action-btn i {
         transition: transform 0.3s ease;
     }

     .action-btn:hover i {
         transform: scale(1.1);
     }

     /* تأثير الطفو */
     @keyframes float {

         0%,
         100% {
             transform: translateY(0);
         }

         50% {
             transform: translateY(-5px);
         }
     }

     .action-btn:hover {
         animation: float 1.5s ease-in-out infinite;
     }

     /* Custom Confirmation Modal Styles */
     .confirm-modal {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.7);
         backdrop-filter: blur(5px);
         z-index: 9999;
         justify-content: center;
         align-items: center;
         opacity: 0;
         transition: opacity 0.3s ease;
     }

     .confirm-modal.show {
         display: flex;
         opacity: 1;
     }

     .confirm-modal-content {
         background: var(--card-bg);
         border-radius: var(--border-radius-medium);
         width: 90%;
         max-width: 500px;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
         border: 1px solid rgba(61, 131, 255, 0.2);
         overflow: hidden;
         transform: translateY(20px);
         transition: transform 0.3s ease;
     }

     .confirm-modal.show .confirm-modal-content {
         transform: translateY(0);
     }

     .confirm-modal-header {
         padding: 1.5rem;
         background: rgba(61, 131, 255, 0.2);
         color: #3d83ff;
         display: flex;
         justify-content: space-between;
         align-items: center;
         border-bottom: 1px solid rgba(61, 131, 255, 0.1);
     }

     .confirm-modal-header h3 {
         margin: 0;
         font-size: 1.5rem;
     }

     .confirm-modal-close {
         font-size: 1.8rem;
         cursor: pointer;
         transition: color 0.2s ease;
     }

     .confirm-modal-close:hover {
         color: #f44336;
     }

     .confirm-modal-body {
         padding: 2rem 1.5rem;
     }

     .confirm-modal-body p {
         margin-bottom: 0.5rem;
         line-height: 1.6;
     }

     .confirm-warning {
         color: #f44336;
         font-size: 0.9rem;
         margin-top: 1rem;
     }

     .confirm-modal-footer {
         display: flex;
         justify-content: flex-end;
         gap: 1rem;
         padding: 1.5rem;
         border-top: 1px solid rgba(255, 255, 255, 0.05);
     }

     .confirm-btn {
         padding: 0.8rem 1.5rem;
         border-radius: var(--border-radius-small);
         font-weight: 500;
         cursor: pointer;
         transition: all 0.3s ease;
         border: none;
     }

     .confirm-cancel {
         background: rgba(255, 255, 255, 0.1);
         color: #fff;
         border: 1px solid rgba(255, 255, 255, 0.2);
     }

     .confirm-cancel:hover {
         background: rgba(255, 255, 255, 0.15);
         transform: translateY(-2px);
     }

     .confirm-delete {
         background: rgba(244, 67, 54, 0.2);
         color: #F44336;
         border: 1px solid rgba(244, 67, 54, 0.3);
     }

     .confirm-delete:hover {
         background: rgba(244, 67, 54, 0.3);
         transform: translateY(-2px);
         box-shadow: 0 5px 15px rgba(244, 67, 54, 0.2);
     }


     /* edit form model */

     .confirm-modal-header.edit-mode {
         background: rgba(61, 131, 255, 0.2);
         color: rgb(61, 131, 255);
     }

     .confirm-edit {
         background: rgba(61, 131, 255, 0.2);
         color: rgb(61, 131, 255);
         border: 1px solid rgba(61, 131, 255, 0.3);
     }

     .confirm-edit:hover {
         background: rgba(61, 131, 255, 0.3);
         transform: translateY(-2px);
         box-shadow: 0 5px 15px rgba(61, 131, 255, 0.2);
     }

     .language-toggle {
         display: flex;
         gap: 1rem;
     }

     .blog-card:hover {
         transform: translateY(-5px);
     }

     .fade-out {
         opacity: 0;
         transition: opacity 0.3s;
     }

     .btn-back {
         padding: 10px 30px;
         background: #007BFF;
         color: white;
         border: none;
         border-radius: 25px;
         cursor: pointer;
     }

     .btn-back:hover {
         background: #0056b3;
     }

[dir="rtl"] .form-label{
    text-align: right;
    margin-top: 1rem;
}

[dir="rtl"] th{
    text-align: right;
    margin-top: 1rem;
}


[dir="rtl"] .table-actions {
   justify-content: start;
}

.blog-grid p {
    color: #ffffffae;
    text-align: center;
    margin: 2rem auto;
    font-size: 1.6rem;
}


