style.css

/* 1. تنسيقات الحاوية الرئيسية */
.gradio-container {
    background: #f9fafb !important;
    font-family: "Noto Sans Arabic", sans-serif !important;
}

/* 2. تنسيقات البلوكات */
.block.svelte-11xb1hd {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 20px !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
}

/* 3. تنسيق العناوين والنصوص */
span.svelte-1gfkn6j {
    color: #5046e5 !important;
    font-size: 15px !important;
    font-weight: bold !important;
    text-align: center !important;
    display: block !important;
    margin-bottom: 0.5rem !important;
}

/* 4. تنسيق حقول الإدخال */
textarea.svelte-173056l,
input.svelte-173056l {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    width: 100% !important;
    direction: rtl !important;
}

/* 5. تنسيق السلايدر */
input[type="range"] {
    accent-color: #5046e5 !important;
}

/* 6. تنسيق الأرقام */
input[type="number"].svelte-10lj3xl {
    background: #28ae66 !important;
    color: white !important;
    border-radius: 10px !important;
    font-weight: bold !important;
    text-align: center !important;
}

/* 7. تنسيق الأزرار */
button.svelte-1137axg {
    background: #5046e5 !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: bold !important;
}

button.secondary {
    background: #6b7280 !important;
}