@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;700&display=swap"); body { font-family: "Noto Sans Arabic", sans-serif; background-color: #f9fafb; /* خلفية رمادية فاتحة */ color: #333333; /* لون النص */ } .container { margin: 0 auto; padding: 1rem; max-width: 768px; /* عرض الصفحة */ } /* العنوان */ h1 { font-size: 1.875rem; font-weight: bold; text-align: center; margin-bottom: 1.5rem; } /* الأزرار */ button { background-color: #4f46e5; /* لون أزرق */ color: #ffffff; /* لون النص أبيض */ padding: 0.75rem 1rem; border: none; border-radius: 8px; /* رواندنس */ cursor: pointer; transition: background-color 0.3s ease; font-weight: bold; } button:hover { background-color: #4338ca; /* أزرق أغمق عند الـ Hover */ } button:disabled { background-color: #a5b4fc; /* لون خافت إذا كان الزر معطل */ cursor: not-allowed; } /* حقول الإدخال */ textarea, input[type="range"] { width: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; /* رواندنس خفيف */ margin-top: 0.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* ظل خفيف */ transition: border-color 0.3s ease, box-shadow 0.3s ease; } textarea:focus, input[type="range"]:focus { outline: none; border-color: #6366f1; /* تركيز بالأزرق الفاتح */ box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); /* ظل عند التركيز */ } /* صندوق الإعدادات */ .bg-gray-50 { background-color: #f9fafb; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } label { font-weight: bold; color: #333333; } span.text-sm { font-size: 0.875rem; color: #6b7280; /* لون رمادي للنصوص الثانوية */ } /* حاوية الملخص */ .border { border: 1px solid #e5e7eb; border-radius: 8px; background-color: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } h2 { font-size: 1.25rem; font-weight: bold; color: #333333; } p.leading-relaxed { line-height: 1.75; color: #4b5563; }