Create style.css

style.css

@@ -0,0 +1,195 @@
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;700&display=swap");
+
+/* تحديد لوحة الألوان لتناسق التصميم */
+:root {
+    --primary-purple: #5046e5;   /* بنفسجي أساسي للأزرار، السلايدر، الحدود */
+    --dark-purple: #342d98;      /* بنفسجي داكن للخلفيات، العناوين */
+    --light-purple: #8e87d1;     /* بنفسجي أفتح للأزرار الثانوية */
+    --text-color-dark: #191996;  /* بنفسجي داكن جداً للنصوص على الخلفية الفاتحة */
+    --text-color-light: #ffffff; /* أبيض للنصوص على الخلفية الداكنة */
+    --background-light: #f9fafb; /* خلفية فاتحة جداً للتطبيق */
+    --border-color: #e5e7eb;     /* لون حدود خفيف */
+    --shadow-color: rgba(0, 0, 0, 0.08); /* لون الظل */
+}
+
+/* الأساسيات: الجسم والحاوية الرئيسية */
+body {
+    background: var(--background-light) !important;
+    color: var(--text-color-dark) !important; /* لون النص الافتراضي */
+    font-family: "Noto Sans Arabic", sans-serif !important;
+}
+
+.gradio-container {
+    background: var(--background-light) !important;
+    font-family: "Noto Sans Arabic", sans-serif !important;
+    color: var(--text-color-dark) !important; /* ضمان أن النص الرئيسي بنفسجي */
+    /* إزالة تحديد العرض الأقصى إذا كان موجوداً لمنع القص */
+    max-width: none !important; 
+}
+
+/* عنوان التطبيق الرئيسي (H1) */
+.gradio-container h1 {
+    color: var(--dark-purple) !important; /* جعل العنوان بنفسجي داكن وواضح */
+    text-align: center !important;
+    margin-top: 30px !important;
+    margin-bottom: 30px !important;
+    font-size: 32px !important; /* حجم أكبر للعنوان */
+    font-weight: 700 !important;
+}
+
+/* البلوكات والحاويات (اللوحات التي تحتوي على المكونات) */
+.block.svelte-11xb1hd, .gr-box { /* إضافة .gr-box لمزيد من الثبات */
+    background: var(--text-color-light) !important; /* خلفية بيضاء للوحات */
+    border: 1px solid var(--border-color) !important;
+    border-radius: 12px !important; /* حواف مستديرة أكثر */
+    overflow: hidden !important; /* لتجنب مشاكل التجاوز */
+    box-shadow: 0 4px 10px var(--shadow-color) !important; /* إضافة ظل خفيف */
+    padding: 20px !important; /* مسافة داخلية للوحات */
+    margin-bottom: 20px !important; /* مسافة بين اللوحات */
+}
+
+/* تعطيل خلفية div.svelte-633qhp (الحاوية الداخلية للتخطيط) */
+div.svelte-633qhp {
+    background: none !important; /* إزالة أي خلفية داخلية محتملة */
+    box-shadow: none !important;
+    border: none !important;
+    border-radius: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+/* تسميات المدخلات والمخرجات (مثل "النص", "الملخص") */
+/* استخدام label.gr-label كمحدد أكثر استقراراً بالإضافة إلى المحدد القديم */
+label.gr-label, span.svelte-1gfkn6j {
+    background: var(--dark-purple) !important; /* خلفية بنفسجية داكنة */
+    color: var(--text-color-light) !important; /* نص أبيض لتباين جيد */
+    font-size: 14px !important; /* حجم خط مناسب */
+    text-align: center !important;
+    display: block !important;
+    margin-bottom: 15px !important; /* مسافة تحت التسمية */
+    padding: 8px 15px !important; /* بادينغ (مسافة داخلية) جيد */
+    border-radius: 8px !important; /* حواف مستديرة */
+    width: fit-content !important; /* عرض يناسب المحتوى */
+    margin-inline-start: auto !important; /* توسيط لـ RTL */
+    margin-inline-end: auto !important;   /* توسيط لـ RTL */
+    font-weight: 700 !important; /* نص سميك */
+}
+
+/* حقول النص (المساحات النصية) */
+textarea.svelte-173056l,
+.gr-textbox > textarea, /* محدد أكثر استقراراً للمساحات النصية */
+input.svelte-173056l.svelte-173056l { /* يشمل حقول الإدخال النصية العامة */
+    background: var(--background-light) !important; /* خلفية فاتحة */
+    color: var(--text-color-dark) !important; /* نص بنفسجي داكن */
+    border: 1px solid var(--border-color) !important; /* حدود خفيفة */
+    border-radius: 8px !important; /* حواف مستديرة */
+    padding: 12px 15px !important; /* بادينغ (مسافة داخلية) */
+    direction: rtl !important;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important; /* ظل داخلي خفيف */
+    outline: none !important; /* إزالة الحدود عند التركيز */
+    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
+}
+textarea.svelte-173056l:focus, .gr-textbox > textarea:focus {
+    border-color: var(--primary-purple) !important; /* حدود بنفسجية عند التركيز */
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(80, 70, 229, 0.2) !important;
+}
+
+
+/* مربعات الأرقام (مثل 150, 7, 0.8) */
+input[type="number"].svelte-10lj3xl,
+.gr-number-input input[type="number"] { /* محدد أكثر استقراراً */
+    background: var(--primary-purple) !important; /* خلفية بنفسجية أساسية */
+    color: var(--text-color-light) !important; /* نص أبيض */
+    border: none !important;
+    border-radius: 8px !important;
+    width: 70px !important; /* عرض أكبر قليلاً */
+    text-align: center !important;
+    padding: 8px 5px !important;
+    font-weight: bold !important;
+}
+
+/* زر الريست (إعادة الضبط/التحديث) بجانب مربعات الأرقام */
+.reset-button.svelte-10lj3xl,
+.gr-number-input button { /* محدد أكثر استقراراً */
+    padding: 6px 10px !important;
+    font-size: 14px !important;
+    background: transparent !important;
+    border: 1px solid var(--primary-purple) !important; /* حدود بنفسجية */
+    color: var(--primary-purple) !important; /* نص بنفسجي */
+    border-radius: 8px !important;
+    margin-inline-start: 10px !important; /* مسافة عن حقل الرقم */
+    cursor: pointer;
+    transition: background-color 0.2s ease, color 0.2s ease !important;
+}
+.reset-button.svelte-10lj3xl:hover, .gr-number-input button:hover {
+    background-color: var(--primary-purple) !important;
+    color: var(--text-color-light) !important;
+}
+
+/* السلايدر (المسار والقبضة) */
+input[type="range"] {
+    accent-color: var(--primary-purple) !important; /* لون المسار والمؤشر */
+}
+
+/* معالجة مشكلة الحاوية المتكررة (أقل أهمية مع التغييرات الأخرى) */
+.form.svelte-633qhp {
+    overflow: visible !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+/* الأزرار: Clear و Submit */
+button.lg.primary, .gr-button.primary { /* زر Submit */
+    background-color: var(--primary-purple) !important;
+    color: var(--text-color-light) !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 12px 25px !important;
+    font-weight: bold !important;
+    font-size: 16px !important;
+    cursor: pointer;
+    transition: background-color 0.2s ease, transform 0.1s ease !important;
+}
+button.lg.primary:hover, .gr-button.primary:hover {
+    background-color: #6a5eff !important; /* بنفسجي أفتح عند التحويم */
+    transform: translateY(-1px);
+}
+
+button.lg.secondary, .gr-button.secondary { /* زر Clear */
+    background-color: var(--light-purple) !important; /* بنفسجي أفتح للزر الثانوي */
+    color: var(--text-color-light) !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 12px 25px !important;
+    font-weight: bold !important;
+    font-size: 16px !important;
+    cursor: pointer;
+    transition: background-color 0.2s ease, transform 0.1s ease !important;
+}
+button.lg.secondary:hover, .gr-button.secondary:hover {
+    background-color: #a7a2df !important; /* بنفسجي أفتح عند التحويم */
+    transform: translateY(-1px);
+}
+
+/* لضمان اتجاه النص من اليمين لليسار */
+.rtl-text {
+    direction: rtl;
+    text-align: right;
+}
+
+/* تحسينات إضافية للمظهر العام */
+/* محاذاة العناوين الفرعية (labels) والتحكم في المساحات */
+.gr-form-group {
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* لتوسيط المكونات داخل مجموعاتها */
+    gap: 10px; /* مسافة بين العناصر داخل المجموعة */
+}
+
+/* قد تحتاج لتعديل هوامش معينة بناءً على المحتوى الفعلي */
+.gr-button-group {
+    display: flex;
+    justify-content: center; /* توسيط الأزرار */
+    gap: 15px; /* مسافة بين الأزرار */
+    margin-top: 20px; /* مسافة فوق مجموعة الأزرار */
+}