:root{
      --bg:#8debfc;
      --card: #f1f7f8;
      --text: #054652;
      --muted:#11314e;
      --brand:#c2b0a8;
      --brand-2:#06b6d4;
      --glass: #c8f5fd;
      --ring: #34dbf8;
      --shadow: #046272;
      --chip:#f1f6f7;
    }
    :root.dark{
      --bg: #0b1220;
      --card: #101a33;
      --text: #e6f1ff;
      --muted:#a5b4cd;
      --glass: rgba(16,26,51,.6);
      --ring: rgba(6,182,212,.35);
      --shadow: 0 10px 30px rgba(0,0,0,.45);
      --chip:#092e36;
      .toggle svg { color: #e6f1ff; }

    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:"Cairo", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      background:
         radial-gradient(1200px 500px at 10% -10%, rgba(6,182,212,.30), transparent 60%),
         radial-gradient(900px 400px at 110% 10%, rgba(10, 10, 10, 0.3), transparent 6%),
         var(--bg);
      color:var(--text);
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    }
    a{color:inherit; text-decoration:none}
    .container{max-width:1280px; margin-inline:auto; padding:24px}

    header.site{
      position:sticky; top:0; z-index:20; backdrop-filter:saturate(160%) blur(10px);
      background:var(--glass); border-bottom:1px solid rgba(6,182,212,.12);
    }
    .topbar{display:flex; align-items:center; gap:16px; justify-content:space-between}
    .brand{display:flex; align-items:center; gap:12px}
        .logo{
      width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
      background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:white; font-weight:800;
      box-shadow:var(--shadow);
    }
    .name{font-weight:800; font-size:20px; letter-spacing:.2px }
    .brand:hover {
  color: var(--brand, #06b6d4); /* تركوازي عند المرور */
  text-shadow: 0 0 10px rgba(6, 182, 212, 0.6);
}
    .tagline{color:var(--muted); font-size:13px}
    .actions{display:flex; align-items:center; gap:10px}
    .btn{
      display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(6,182,212,.25);
      background:var(--card); color:var(--text); padding:10px 14px; border-radius:999px;
      font-weight:700; box-shadow:var(--shadow)
    }
    .btn:hover{outline:2px solid var(--ring)}
    .icon{width:18px; height:18px; display:inline-block}
    /* بطل */
    .hero{padding:28px 0 10px}
    .hero h1{margin:0 0 6px; font-size:28px; font-weight:800}
    .hero p{margin:0; color:var(--muted)}
    /* شريط البحث */
    .searchbar{
      margin-top:18px; display:flex; gap:10px; background:var(--card); border:1px solid rgba(6,182,212,.2);
      padding:10px; border-radius:16px; box-shadow:var(--shadow)
    }
    .searchbar input{
      flex:1; border:none; outline:none; background:transparent; color:var(--text);
      font-size:16px; padding:10px 12px
    }
    .searchbar .search-btn{
  border:none; cursor:pointer; border-radius:12px; padding:10px 14px; font-weight:700;
  background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:white;
}

    .searchbar .site-btn{
      border:none; cursor:pointer; border-radius:12px; padding:10px 14px; font-weight:700;
      background:var(--chip); color:var(--brand-2)
    }
    /* توهج أيقونة البحث */
.searchbar .search-btn .icon {
  color: white;
  transition: color .3s ease, text-shadow .3s ease, transform .3s ease;
}

:root.dark .searchbar .search-btn .icon {
  color: #e6f1ff;
}

.searchbar:focus-within .search-btn .icon,
.searchbar .search-btn:hover .icon {
  color: var(--ring);
  text-shadow: 0 0 8px var(--ring);
  transform: scale(1.1);
}
   /* ====== أقسام المدونة حسب التصنيف ====== */
.sections {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 24px;
}

.blog-section {
  padding: 18px 0 6px;
  border-bottom: 1px solid rgba(6, 182, 212, 0.12);
}

.blog-section:last-child {
  border-bottom: none;
}

.blog-section .section-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.blog-section h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}

.blog-section p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

/* نتائج البحث */
#searchResults {
  margin-top: 32px;
}

#searchResults[hidden],
#sectionsWrapper[hidden] {
  display: none !important;
}

#searchResults .empty {
  color: var(--muted);
  font-size: 14px;
  padding: 8px 4px;
}
.section-title-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 14px;
  border-radius:999px;
  background:linear-gradient(135deg,#06b6d4,#22d3ee,#9333ea);
  color:#0f172a;
  font-size:15px;
  font-weight:800;
  box-shadow:0 10px 30px rgba(15,23,42,.25);
}

.section-title-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:inherit;
}

.section-title-link:hover{
  opacity:.92;
  transform:translateY(-1px);
}

.section-title-pill .emoji{
  font-size:18px;
}

.section-title-pill .text{
  letter-spacing:0.02em;
}



    /* شبكة المقالات */
    .grid{
      display:grid; gap:18px; margin-top:22px;
      grid-template-columns: repeat(1, minmax(0,1fr));
    }
    @media (min-width:640px){ .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
    @media (min-width:980px){ .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
    .card{
      background:var(--card); border:1px solid rgba(6,182,212,.16); border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
      display:flex; flex-direction:column; min-height:100%;
      transition:transform .15s ease, box-shadow .15s ease;
    }
    .card:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(2,8,23,.14) }
    .thumb{aspect-ratio:16/9; width:100%; background:#0ea5b80f; display:block}
    .body{padding:14px 16px 16px; display:flex; gap:10px; flex-direction:column}
    .chips{display:flex; gap:8px; flex-wrap:wrap}
    .chip{font-size:12px; padding:6px 10px; background:var(--chip); border-radius:999px; border:1px solid rgba(6,182,212,.25); color:var(--brand-2); font-weight:700}
    .title{font-weight:800; font-size:18px; line-height:1.35}
    .meta{display:flex; gap:10px; align-items:center; color:var(--muted); font-size:13px}
    .excerpt{color:var(--muted); font-size:14px}
    .more{
      margin:26px auto 60px; display:block; padding:12px 18px; border-radius:14px; font-weight:800;
      border:1px solid rgba(6,182,212,.25); background:var(--card); box-shadow:var(--shadow)
    }
    .more:hover{outline:2px solid var(--ring)}
    footer{
      border-top:1px solid rgba(6,182,212,.12); margin-top:36px; padding:24px; color:var(--muted)
    }
    /* صورة افتراضية SVG داخلية */
    .ph{
      background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="%2306b6d4" offset="0"/><stop stop-color="%230891b2" offset="1"/></linearGradient></defs><rect width="1200" height="675" fill="url(%23g)"/><g fill="white" opacity="0.92"><circle cx="180" cy="120" r="6"/><circle cx="1040" cy="150" r="5"/><circle cx="960" cy="540" r="7"/></g><text x="50" y="620" font-family="Cairo, Arial" font-size="46" fill="white" opacity="0.92">FikraLab Blog Placeholder</text></svg>');
      background-size:cover; background-position:center;
    }
    /* زر تبديل الثيم */
    .toggle{
      width:40px; height:40px; border-radius:999px; border:1px solid rgba(6,182,212,.3);
      display:grid; place-items:center; background:var(--card); cursor:pointer; box-shadow:var(--shadow)
    }
    .toggle svg { color: var(--brand-2); }

    .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
    /* تركيز واضح */
    :focus-visible{ outline:3px solid var(--ring); outline-offset:2px }
    input, button, textarea {
  font-family: "Cairo", sans-serif !important;
}
/* =========================================================
   🧩 تحسينات التوافق التفاعلي — Responsive Enhancements
   ========================================================= */

/* الهواتف الصغيرة جدًا (شاشات أقل من 400px) */
@media (max-width: 400px) {
  .searchbar {
    flex-direction: column;
    gap: 8px;
    padding: 8px;
  }

  .searchbar .search-btn {
    width: 100%;
    justify-content: center;
  }

  .searchbar input {
    font-size: 14px;
    padding: 8px 10px;
  }

  .hero h1 {
    font-size: 22px;
  }

  .hero p {
    font-size: 13px;
  }
}

/* الأجهزة اللوحية (من 768px إلى 980px) */
@media (min-width: 768px) and (max-width: 980px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .searchbar input {
    font-size: 15px;
  }

  .hero h1 {
    font-size: 26px;
  }
}

/* الشاشات الكبيرة جدًا (من 1440px فأكثر) */
@media (min-width: 1440px) {
  .container {
    max-width: 90%;
  }

  .grid {
    gap: 24px;
  }

  .card {
    border-radius: 20px;
  }
}

/* تحسين العرض الأفقي للتابلت أو اللابتوب المتوسط */
@media (min-width: 1024px) and (max-width: 1280px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* للهواتف المتوسطة (من 400 إلى 640px) */
@media (min-width: 400px) and (max-width: 640px) {
  .searchbar input {
    font-size: 15px;
  }

  .searchbar .search-btn {
    padding: 10px 20px;
  }
}