:root{
  --bg: #032313;         /* أخضر داكن عميق ومريح للعين */
  --bg2: linear-gradient(190deg, #0b2e1c 0%, #051a10 100%);        /* لون تدريجي خاص بالأخضر */
  --bg3: #0a3623;        /* أخضر فرعي أفتح قليلاً للتفاصيل */
  --gold: #db9b48;       /* ذهبي دافئ وناعم غير مؤذٍ للعين */
  --gold-dim: #b89742;
  --ink: #f4efe1;        /* نص كريمي فاتح وناعم بدلاً من الأبيض الناصع */
  --mut: #b4c9b9;        /* نص مساعد مريح وهادئ */
  --shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0,0,0,0.1);
  color-scheme: dark;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top,0px);
  padding-bottom: env(safe-area-inset-bottom,0px);
}

[data-theme="light"] {
  --bg: #ece2ca;
  --bg2: linear-gradient(190deg, #f7f2e8 0%, #e5d7b6 100%);
  --bg3: #f8eaca;
  --gold: #995c00;
  --gold-dim: #996515;
  --ink: #1a3024;
  --mut: #5a7364;
  --shadow: 0 10px 30px -5px rgba(26, 48, 36, 0.05), 0 1px 3px rgba(0,0,0,0.02);
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #032313;         
  --bg2: linear-gradient(190deg, #0b2e1c 0%, #051a10 100%);        
  --bg3: #0a3623;        
  --gold: #db9b48;       
  --gold-dim: #b89742;
  --ink: #f4efe1;        
  --mut: #b4c9b9;        
  --shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0,0,0,0.1);
  color-scheme: dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100vh;background:var(--bg) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%23edbf6d' stroke-width='1.2' stroke-linejoin='round' stroke-opacity='.075'><circle cx='60' cy='60' r='42'/><path d='M89.7 30.3 89.7 89.7 30.3 89.7 30.3 30.3Z'/><path d='M102 60 60 102 18 60 60 18Z'/></svg>") 0 0/120px 120px repeat;color:var(--ink);font-family:Tajawal,"Segoe UI",Tahoma,sans-serif;line-height:1.8}
/* الخلفية للوضع الفاتح (بشفافية هادئة ولون غير مشتت) */
[data-theme="light"] body{background:var(--bg) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%23996515' stroke-width='1.2' stroke-linejoin='round' stroke-opacity='.10'><circle cx='60' cy='60' r='42'/><path d='M89.7 30.3 89.7 89.7 30.3 89.7 30.3 30.3Z'/><path d='M102 60 60 102 18 60 60 18Z'/></svg>") 0 0/120px 120px repeat;}
main{max-width:640px;margin:0 auto;padding:10px 16px 56px}
.hero{text-align:center}
h1{color:var(--gold);font-size:2.2rem;line-height:1.5;margin:0 0 8px;font-weight:800}
.lead{color:var(--mut);margin:0 auto 28px;max-width:30em}


/* آية الصلاة على النبي: بطاقة بنفس أسلوب "الفكرة الجامعة" في الأرباع */
.ayah{background:var(--bg2);border:1px solid var(--line2);border-radius:20px;padding:22px 18px 14px;box-shadow:var(--shadow);margin:0 0 36px}
.ayah p{font-family:"Amiri Quran","Traditional Arabic",serif;font-size:1.7rem;line-height:2.4;margin:0;color:var(--ink)}
.ayah .br{color:var(--gold)}
.ayah small{display:block;margin-top:6px;color:var(--gold);font-size:.95rem}

h2{color:var(--gold);text-align:center;font-size:1.5rem;margin:0 0 14px;font-weight:800}

/* بطاقة المحطة: حواف 24px + شريط علوي ملوّن + ظل ناعم */
.box {
  position: relative;
  background: var(--bg2);
  border-radius: 24px;
  padding: 26px 22px 22px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  margin-bottom: 30px; /* يترك مساحة فارغة في الخلفية تحت الصندوق مباشرة */
}

.fatiha {
  position: relative;
  background: var(--bg2);
  border-radius: 24px;
  padding: 26px 22px 22px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.box::before,.fatiha::before{content:"";position:absolute;top:0;right:0;left:0;height:5px;background:var(--gold);border-radius:24px 24px 0 0}

label{display:block;font-size:.9rem;color:var(--mut);margin:8px 0 4px}
input,select{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--bg3);border:1px solid var(--line2);border-radius:14px;padding:12px 14px;min-height:48px}
input::placeholder{color:var(--mut);opacity:.7}
input:focus,select:focus,button:focus-visible,.res a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button{width:100%;margin-top:14px;min-height:50px;font:inherit;font-weight:800;font-size:1.05rem;color:#0b1f15;background:var(--gold);border:0;border-radius:14px;cursor:pointer;transition:filter .15s,transform .15s}
button:hover{filter:brightness(1.08)}
button:active{transform:scale(.98)}

.res {
  margin-top: 16px;
  display: grid;
  gap: 8px;
  max-height: 480px; /* ارتفاع محدد يتيح ظهور حوالي 4 نتائج بوضوح */
  overflow-y: auto;  /* تفعيل شريط التمرير عند زيادة النتائج */
  padding-inline-end: 8px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--bg3); /* ألوان تتكيف تلقائياً مع الثيم الحالي */
}

/* تخصيص شكل شريط التمرير (للمتصفحات مثل كروم وساطور) */
.res::-webkit-scrollbar {
  width: 6px; /* جعل الشريط نحيفاً وأنيقاً */
}

.res::-webkit-scrollbar-track {
  background: var(--bg3); /* لون الخلفية يتوافق مع الثيم تلقائياً */
  border-radius: 10px;
}

.res::-webkit-scrollbar-thumb {
  background: var(--gold); /* لون المقبض ذهبي متناسق مع الثيمين */
  border-radius: 10px;
}

.res::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.1);
}
.res .grp{color:var(--gold);font-weight:700;margin-top:6px}
.res a{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:48px;padding:8px 14px;background:var(--bg3);border-radius:14px;border:1px solid rgba(255,255,255,.05);color:var(--ink);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.res a:hover{border-color:var(--gold);box-shadow:0 0 0 2px rgba(223,197,123,.18)}
.res a span{color:var(--gold);font-size:.85rem}
.msg{padding:10px 14px;background:var(--bg3);border-radius:14px;color:var(--mut);border:1px dashed rgba(255,255,255,.18)}
footer{text-align:center;color:var(--mut);font-size:.85rem;margin-top:36px}
@media(max-width:420px){h1{font-size:1.8rem}.ayah p{font-size:1.45rem}}

/* قائمة الأرباع مع بداية الآية */
.dd{position:relative}
#ddb{margin:0;display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:start;font-weight:400;font-size:1rem;color:var(--ink);background:var(--bg3);border:1px solid var(--line2);border-radius:14px;padding:8px 14px;min-height:48px}
#ddb:hover{filter:none;border-color:var(--gold)}
#ddb:active{transform:none}
#ddb .car{color:var(--gold)}
#ddl{list-style:none;margin:6px 0 0;padding:6px;position:absolute;inset-inline:0;z-index:5;max-height:240px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#edbf6d #122b1d;background:var(--bg3);border:1px solid var(--line2);border-radius:16px;box-shadow:0 15px 35px -5px rgba(0,0,0,.5)}
#ddl::-webkit-scrollbar{width:10px}
#ddl::-webkit-scrollbar-track{background:var(--bg2);border-radius:10px}
#ddl::-webkit-scrollbar-thumb{background:var(--gold);border-radius:10px;border:2px solid var(--bg2)}
#ddl li{padding:8px 12px;border-radius:10px;cursor:pointer;min-height:48px}
#ddl li:hover,#ddl li:focus,#ddl li[aria-selected="true"]{background:var(--bg2);outline:none}
#ddl li:focus-visible{outline:2px solid var(--gold)}
.dd b,.res a b{display:block;color:var(--ink);font-weight:800;font-size:1rem}
.v{display:block;font-family:"Amiri Quran","Traditional Arabic",serif;font-size:.88rem;line-height:1.9;color:var(--mut)}

/* القائمة الهرمية: جزء ← حزب ← ربع */
#ddl li+li{margin-top:2px}
#ddl li.g{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:800}
#ddl li.j{color:var(--gold);background:var(--bg2);border:1px solid var(--line2)}
#ddl li.h{color:var(--ink);padding-inline-start:28px;border-inline-start:2px solid rgba(223,197,123,.28)}
#ddl li.r{padding-inline-start:44px;border-inline-start:2px solid rgba(223,197,123,.28)}
#ddl li.g .cv{color:var(--gold);font-size:.9rem}
.ph{color:var(--mut)}
.pth{display:block;color:var(--mut);font-size:.78rem;line-height:1.5}

/* قسم الفاتحة في الصفحة الرئيسية */
.fatiha{margin:0 0 24px;text-align:center;transition:transform .2s ease,box-shadow .2s ease}
.fatiha:hover{transform:translateY(-2px);box-shadow:0 15px 35px -5px rgba(0,0,0,.4)}
.fatiha p{color:var(--mut);margin:0 auto 4px;max-width:32em;font-size:.95rem}
.btn{display:flex;align-items:center;justify-content:center;margin-top:14px;min-height:50px;font-weight:800;font-size:1.05rem;color:#0b1f15;background:var(--gold);border-radius:14px;text-decoration:none;transition:transform .15s,filter .15s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.btn,button,.fatiha,.res a{transition:none}.fatiha:hover{transform:none}html{scroll-behavior:auto}}

/* ضبط لون الشارات وأزرار التنقل لتكون واضحة في الثيم الفاتح */
[data-theme="light"] .pill {
  color: #ffffff !important;
}
[data-theme="light"] .bnav .pv, 
[data-theme="light"] .bnav .nx {
  color: #ffffff !important;
}
[data-theme="light"] .btn,
[data-theme="light"] .box form button[type="submit"] {
  color: #ffffff !important;
}
[data-theme="light"] .ph {
  color: #242222 !important;
}
[data-theme="light"] .v {
  color: #1a3024;
}
/* إظهار حدود البطاقات في الثيم الفاتح */
[data-theme="light"] .st,
[data-theme="light"] .det,
[data-theme="light"] .idea {
  border-color: rgba(153, 101, 21, 0.20);
}


/* تصميم الزر العائم الثابت للتبديل بين الثيمات */
.theme-switcher {
  position: fixed;
  bottom: 24px;
  left: 24px;
  background: var(--bg2);
  border: 1px solid var(--gold);
  color: var(--gold);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  z-index: 1000;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.theme-switcher:hover {
  transform: scale(1.1);
  filter: brightness(1.2);
}
/* عندما يكون الموقع في الوضع الفاتح: اجعل الزر داكناً (أخضر عميق مع ذهبي) ليلفت الانتباه تماماً */
[data-theme="light"] .theme-switcher {
  background: #032313;
  border: 2px solid #996515;
  color: #db9b48;
}

/* عندما يكون الموقع في الوضع الداكن: اجعل الزر فاتحاً وساطعاً (عاجي مع ذهبي) ليلفت الانتباه */
[data-theme="dark"] .theme-switcher {
  background: #ece2ca;
  border: 2px solid #db9b48;
  color: #032313;
}
/* عكس ظهور الأيقونات: في الثيم الفاتح يظهر القمر، وفي الثيم الداكن تظهر الشمس */
[data-theme="light"] .sun-icon { display: none; }
[data-theme="light"] .moon-icon { display: block; }
[data-theme="dark"] .sun-icon { display: block; }
[data-theme="dark"] .moon-icon { display: none; }
:root:not([data-theme]) .sun-icon { display: none; }
:root:not([data-theme]) .moon-icon { display: block; }


/* خصائص عامة لشعار الموقع */
.site-logo {
  max-height: 200px;
  width: auto;
  display: inline-block;
  margin: 0 auto;
}

/* الوضع الافتراضي أو الداكن: إظهار الشعار الذهبي (dark) وإخفاء الغامق (light) */
.logo-light {
  display: none;
}
.logo-dark {
  display: block;
}

/* عند تفعيل الوضع الفاتح (Light Theme): إظهار الشعار الغامق وإخفاء الذهبي */
[data-theme="light"] .logo-dark {
  display: block;
}
[data-theme="light"] .logo-light {
  display: none;
}

/* عند تفعيل الوضع الداكن (Dark Theme): إظهار الشعار الذهبي وإخفاء الغامق */
[data-theme="dark"] .logo-dark {
  display: none;
}
[data-theme="dark"] .logo-light {
  display: block;
}

/* إزالة إطار رابط شرح الآية في الوضع العادي */
.res a.v {
  border: 1px solid transparent;
  box-shadow: none;
  background: transparent;
}

/* إظهار الإطار الذهبي عند Hover فقط */
.res a.v:hover {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(223,197,123,.18);
}



/* =========================================
   بطاقة المساهمة في تطوير التبيان
   ========================================= */

.suggestion-card {
  margin-top: 24px;
  background: var(--bg2);
  border: 1px solid rgba(219, 155, 72, 0.24);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: center;
}

/* الجزء الرئيسي */
.suggestion-main {
  padding: 25px 18px 22px;
}

/* الأيقونة */
.suggestion-icon {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto 9px;
  color: var(--gold);
}

/* العنوان */
.suggestion-card h2 {
  margin: 0 0 5px;
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 800;
}

/* الوصف */
.suggestion-desc {
  margin: 0 auto 12px;
  color: var(--mut);
  font-size: 0.94rem;
  line-height: 1.7;
}

/* زر إرسال الاقتراح */
.suggestion-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 46px;
  padding: 8px 22px;

  border: 1px solid rgba(219, 155, 72, 0.55);
  border-radius: 12px;

  background: rgba(219, 155, 72, 0.09);
  color: var(--gold);

  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  line-height: 1.4;

  transition: background 0.2s ease,
              border-color 0.2s ease,
              transform 0.2s ease;
}

.suggestion-link:hover {
  background: var(--bg3);
  border-color: var(--gold);
  transform: translateY(-2px);
}

.suggestion-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* الخط الفاصل والرسالة السفلية */
.suggestion-note {
  margin: 0;
  padding: 14px 16px 16px;

  border-top: 1px solid rgba(219, 155, 72, 0.16);

  color: var(--mut);
  font-size: 0.82rem;
  line-height: 1.7;
}

/* ضبط الحدود والخلفية في الوضع الفاتح */
[data-theme="light"] .suggestion-card {
  border-color: rgba(153, 101, 21, 0.24);
}

[data-theme="light"] .suggestion-link {
  background: rgba(153, 92, 0, 0.07);
  border-color: rgba(153, 92, 0, 0.38);
}

/* تحسين العرض على الهواتف */
@media (max-width: 420px) {
  .suggestion-main {
    padding: 22px 14px 20px;
  }

  .suggestion-card h2 {
    font-size: 1.08rem;
  }

  .suggestion-desc {
    font-size: 0.88rem;
  }

  .suggestion-note {
    padding-inline: 12px;
    font-size: 0.78rem;
  }
}