style.css

@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; /* مسافة فوق مجموعة الأزرار */
}