“`html

/*
*** استایل‌های عمومی برای رسپانسیو بودن در تمامی دستگاه‌ها (موبایل، تبلت، لپ‌تاپ، تلویزیون) ***
*/
@import url(‘https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;700;900&display=swap’); /* فونت فارسی محبوب و مدرن */

body {
font-family: ‘Vazirmatn’, sans-serif;
line-height: 1.8;
color: #333;
margin: 0;
padding: 0;
background-color: #f8f9fa; /* رنگ پس‌زمینه روشن */
direction: rtl; /* برای زبان فارسی */
text-align: right;
}

.container {
max-width: 900px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
overflow-x: hidden; /* جلوگیری از اسکرول افقی ناخواسته */
}

/* استایل هدینگ‌ها */
h1 {
font-size: 2.8em;
font-weight: 900;
color: #0d47a1; /* آبی تیره برای H1 */
text-align: center;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 3px solid #e0e0e0;
line-height: 1.3;
}

h2 {
font-size: 2.2em;
font-weight: 800;
color: #1565c0; /* آبی متوسط برای H2 */
margin-top: 40px;
margin-bottom: 25px;
padding-right: 15px;
border-right: 5px solid #2196f3;
line-height: 1.4;
}

h3 {
font-size: 1.7em;
font-weight: 700;
color: #1976d2; /* آبی روشن‌تر برای H3 */
margin-top: 30px;
margin-bottom: 20px;
padding-right: 10px;
border-right: 3px solid #64b5f6;
line-height: 1.5;
}

p {
margin-bottom: 1.2em;
font-size: 1.05em;
color: #444;
}

ul, ol {
margin-bottom: 1.5em;
padding-right: 25px;
list-style-type: square; /* یک استایل ساده برای لیست‌ها */
}

li {
margin-bottom: 0.8em;
font-size: 1.05em;
color: #555;
}

/* استایل جدول */
table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
font-size: 1.05em;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden; /* برای حفظ border-radius */
}

th, td {
border: 1px solid #ddd;
padding: 15px;
text-align: right;
}

th {
background-color: #e3f2fd; /* آبی روشن برای هدر جدول */
color: #0d47a1;
font-weight: 700;
}

tr:nth-child(even) {
background-color: #f5f5f5; /* ردیف‌های زوج با رنگ کمی متفاوت */
}

tr:hover {
background-color: #eaf6fc; /* هایلایت هنگام هاور */
}

/* استایل برای بلوک‌های اطلاعاتی / اینفوگرافیک جایگزین */
.info-block {
background-color: #e8f5e9; /* سبز روشن برای بلوک‌های مثبت */
border-right: 8px solid #4caf50; /* خط سبز ضخیم */
padding: 25px;
margin: 30px 0;
border-radius: 10px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.info-block.quality {
background-color: #e3f2fd; /* آبی روشن برای بلوک‌های کیفیت */
border-right: 8px solid #2196f3;
}

.info-block h3 {
color: #1b5e20; /* رنگ تیره تر برای هدینگ داخل بلوک سبز */
margin-top: 0;
border-right: none; /* حذف border از راست برای هدینگ داخلی */
padding-right: 0;
}

.info-block.quality h3 {
color: #0d47a1; /* رنگ تیره تر برای هدینگ داخل بلوک آبی */
}

.info-item {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
color: #333;
}

.info-item:last-child {
margin-bottom: 0;
}

.info-icon {
font-size: 2.2em;
line-height: 1;
margin-left: 15px;
color: #2e7d32; /* سبز تیره برای آیکون‌های کیفیت */
}

.info-block.quality .info-icon {
color: #1976d2; /* آبی برای آیکون‌های کیفیت */
}

.info-text {
flex: 1;
}

.info-text strong {
font-size: 1.1em;
display: block;
margin-bottom: 5px;
}

/* فهرست مطالب */
.table-of-contents {
background-color: #f0f8ff; /* آبی بسیار روشن برای فهرست مطالب */
border-left: 5px solid #81d4fa; /* خط آبی روشن در سمت چپ */
padding: 25px;
margin: 30px 0;
border-radius: 8px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.table-of-contents h2 {
color: #01579b; /* آبی تیره برای عنوان فهرست */
margin-top: 0;
border-right: none;
padding-right: 0;
font-size: 1.8em;
}

.table-of-contents ul {
list-style: none;
padding-right: 0;
margin-top: 15px;
}

.table-of-contents li a {
color: #1e88e5; /* آبی برای لینک‌های فهرست */
text-decoration: none;
font-size: 1.1em;
padding: 8px 0;
display: block;
transition: all 0.3s ease;
border-bottom: 1px dashed #e0e0e0;
}

.table-of-contents li:last-child a {
border-bottom: none;
}

.table-of-contents li a:hover {
color: #0d47a1;
padding-right: 10px;
background-color: #e3f2fd;
border-radius: 4px;
}

/* استایل‌های ریسپانسیو برای اندازه‌های مختلف صفحه */
@media (max-width: 768px) {
.container {
margin: 10px auto;
padding: 15px;
}
h1 {
font-size: 2.2em;
margin-bottom: 20px;
}
h2 {
font-size: 1.8em;
margin-top: 30px;
margin-bottom: 20px;
padding-right: 10px;
}
h3 {
font-size: 1.4em;
margin-top: 25px;
margin-bottom: 15px;
padding-right: 8px;
}
p, li, th, td {
font-size: 0.95em;
}
.table-of-contents h2 {
font-size: 1.6em;
}
.info-block {
padding: 20px;
}
.info-icon {
font-size: 1.8em;
margin-left: 10px;
}
}

@media (max-width: 480px) {
.container {
margin: 5px auto;
padding: 10px;
}
h1 {
font-size: 1.8em;
margin-bottom: 15px;
}
h2 {
font-size: 1.5em;
margin-top: 25px;
margin-bottom: 15px;
padding-right: 8px;
}
h3 {
font-size: 1.2em;
margin-top: 20px;
margin-bottom: 10px;
padding-right: 5px;
}
p, li, th, td {
font-size: 0.9em;
}
table, .info-block {
margin: 20px 0;
padding: 15px;
}
.table-of-contents h2 {
font-size: 1.4em;
}
.table-of-contents li a {
font-size: 1em;
padding: 6px 0;
}
.info-icon {
font-size: 1.6em;
margin-left: 8px;
}
}

/* استایل‌های بهینه‌سازی برای نمایشگرهای بزرگتر (مانند تلویزیون) */
@media (min-width: 1200px) {
.container {
max-width: 1000px; /* افزایش عرض محتوا برای نمایشگرهای بزرگ */
padding: 30px;
}
h1 {
font-size: 3.2em;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 2em;
}
p, li, th, td {
font-size: 1.1em;
}
.table-of-contents h2 {
font-size: 2em;
}
.info-icon {
font-size: 2.5em;
}
}

“`