:root{
      --max: 1100px;
      --pad: 14px;
      --radius: 14px;
      --border: #111;
      --muted: #666;
      --bg: #fff;
      --card: #fff;
    }

    *{ box-sizing:border-box; }
    html,body{ max-width:100%; overflow-x:hidden; }
    body{
      margin:0;
      font-family: Arial, Tahoma, sans-serif;
      background: var(--bg);
      color:#111;
      line-height:1.9;
      font-size:18px;
    }

    a{ color:#0645ad; text-decoration:none; }
    a:hover{ text-decoration:underline; }

    .container{
      max-width: var(--max);
      margin: 0 auto;
      padding: 14px;
    }

    header{
      background: var(--card);
      border-bottom: 1px solid #e5e5e5;
    }

    .hero{
      background: var(--card);
      border: 1px solid #eaeaea;
      border-radius: var(--radius);
      padding: 18px;
      margin-top: 14px;
    }

   
    .hero p{
      margin:0;
      color: var(--muted);
      font-size:16px;
    }

    /* ===== TOC ===== */
    .toc{
      background: var(--card);
      border: 2px solid var(--border);
      border-radius: var(--radius);
      padding: 14px;
      margin-top: 14px;
    }
    .toc-title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .toc-title h2{
      margin:0;
      font-size:20px;
    }

    /* قائمة مرنة */
    .toc-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:10px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .toc-grid a{
      display:block;
      background:#f3f6ff;
      border:1px solid #d7e0ff;
      border-radius: 12px;
      padding:10px 12px;
      font-size:16px;
      line-height:1.4;
      color:#0b2a6f;
    }

    main{
      margin-top:14px;
    }

    section{
      background: var(--card);
      border: 1px solid #eaeaea;
      border-radius: var(--radius);
      padding: 18px;
      margin-bottom: 14px;
    }

    section h2{
      margin: 0 0 10px;
      font-size:22px;
    }

    .meta{
      color: var(--muted);
      font-size:14px;
      margin-top:-2px;
      margin-bottom:12px;
    }

    /* صندوق النص */
    .text-box{
      border: 2px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      background:#fff;
    }
    .text-box p{ margin: 10px 0; }

    footer{
      background: var(--card);
      border-top: 1px solid #e5e5e5;
      padding: 16px 0;
      margin-top: 18px;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:center;
      font-size:16px;
    }
    .copyright{
      text-align:center;
      color: var(--muted);
      font-size:14px;
      margin-top:10px;
    }

    /* ===== Mobile ===== */
    @media (max-width: 768px){
      body{ font-size:16px; }
      .hero h1{ font-size:22px; }
      section h2{ font-size:19px; }
      .toc-grid{ grid-template-columns: 1fr; }
      .toc-grid a{ font-size:15px; }
    }

    @media (max-width: 420px){
      .container{ padding: 10px; }
      .hero, section, .toc{ padding: 14px; }
      .hero p{ font-size:14px; }
    }
/* ===== Top Menu Responsive (RTL) ===== */
*{box-sizing:border-box}
body{margin:0;font-family:Arial, sans-serif}

/* Container */
.topbar{
  background:#fff;
  border-bottom:1px solid #e5e5e5;
}

/* Items grid */
.topbar .menu{
  max-width:1100px;
  margin:0 auto;
  padding:10px 8px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
}

/* Single item */
.menu a{
  width:110px;                /* desktop look */
  text-align:center;
  color:#00f;
  text-decoration:underline;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:6px 4px;
  border-radius:10px;
}

/* Icon */
.menu a img{
  width:80px;
  height:80px;
  object-fit:contain;
  display:block;
}

/* Label */
.menu a span{
  font-size:24px;
  line-height:1.25;
  font-weight:700;
}

/* Hover */
.menu a:hover{
  background:#f5f7ff;
}

/* ===== Tablet ===== */
@media (max-width:768px){
  .topbar .menu{
    justify-content:center;
  }
  .menu a{
    width:32%;               /* 3 items per row تقريباً */
    min-width:140px;
  }
  .menu a span{font-size:16px}
}

/* ===== Small phones ===== */
@media (max-width:420px){
  .menu a{
    width:48%;               /* 2 items per row */
    min-width:150px;
  }
  .menu a img{width:44px;height:44px}
  .menu a span{font-size:15px}
}

/* ===== Mobile Friendly Patch (RTL) ===== */
*{ box-sizing:border-box; }
html,body{ max-width:100%; overflow-x:hidden; }
body{ margin:0; font-family:Arial, sans-serif; line-height:1.7; }

/* Make all tables fluid */ table{ width:100% !important; max-width:100% !important; height:auto !important; border-collapse:collapse; } table[width="950"]{ width:100% !important; } /* your main table */ td{ max-width:100%; word-break:break-word; }


/* Images responsive (fix fixed width images like 798px banner) */
img{ max-width:100% !important; height:auto !important; }

/* Ads/iframes/widgets responsive */
iframe, ins.adsbygoogle{ max-width:100% !important; width:100% !important; }

/* Reduce huge spacing from old <p align> on mobile */
p{ margin:10px 0; }

/* Headings scale better */
h1{ font-size:28px; margin:10px 0; }
h2{ font-size:22px; margin:10px 0; }
h3{ font-size:20px; margin:10px 0; }

/* Links readable */
a{ text-decoration:none; }

/* ===== Top icon menu (first table) -> wrap nicely on small screens ===== */
@media (max-width:768px){

  /* make the first menu table behave like a grid */
  body > div[align="center"] > div[align="center"] > table{
    display:block !important;
  }
  body > div[align="center"] > div[align="center"] > table tr{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:10px !important;
  }
  body > div[align="center"] > div[align="center"] > table td{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:30% !important;   /* 3 items per row تقريباً */
    min-width:110px !important;
    padding:6px !important;
    text-align:center !important;
  }

  /* make text below icons smaller and consistent */
  body > div[align="center"] > div[align="center"] > table td font{
    font-size:16px !important;
  }

  /* main content padding */
  body > div[align="center"]{ padding:10px; }

  /* paragraphs and general font sizing */
  p, font, span{ font-size:22px !important; }
}

/* Extra-small phones */
@media (max-width:420px){
  body > div[align="center"] > div[align="center"] > table td{
    width:46% !important;   /* 2 items per row */
    min-width:140px !important;
  }
  h1{ font-size:24px; }
  h2{ font-size:18px; }
  h3{ font-size:18px; }
  h4{ font-size:18px; }
  h5{ font-size:18px; }
  h6{ font-size:18px; }
}