:root{
  /* أساس اللوحة */
  --deep:#124F49;        /* الأخضر المزرقّ العميق — القوائم والكتل */
  --deep-2:#0E413C;      /* أغمق للتباين داخل القائمة */
  --deep-3:#1A6159;      /* أفتح للتمرير */
  --page:#F1F4F3;        /* خلفية الصفحة */
  --card:#FFFFFF;
  --line:#E3E9E7;
  --line-2:#EFF3F2;
  --ink:#0F1B18;         /* النص الأساسي — أسود مائل للأخضر */
  --ink-2:#2B3936;       /* ثانوي */
  --ink-3:#4A5855;       /* التسميات والملاحظات */
  --link:#1A6159;
  --tint:#E8F1EF;        /* تظليل ناعم للصلاة الحالية */
  --gold:#C09A3E;        /* لمسة دافئة للاقتباسات فقط */
  --gold-soft:#FAF6EC;
  --sidebar:250px;
}
*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;height:auto}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--page);color:var(--ink);
  font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;
  font-weight:400;line-height:1.9;font-size:16px
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;direction:ltr;font-variant-numeric:tabular-nums}

/* ══ القائمة الجانبية ══ */
.sidebar{
  position:fixed;inset-block:0;inset-inline-start:0;width:var(--sidebar);
  background:var(--deep);color:#DCE8E6;overflow-y:auto;z-index:40;
  display:flex;flex-direction:column;
  transform:none;transition:transform .28s ease
}
/* في الاتجاه من اليمين لليسار تختفي ناحية اليمين، والعكس في الإنجليزية */
body.nav-closed .sidebar{transform:translateX(100%)}
[dir="ltr"] body.nav-closed .sidebar{transform:translateX(-100%)}
.logo{padding:1.8rem 1rem 1.4rem;text-align:center;border-bottom:1px solid rgba(255,255,255,.09)}
.logo svg{width:52px;height:52px;color:#fff;opacity:.95}
.logo b{display:block;font-family:"Cairo","IBM Plex Sans Arabic",sans-serif;font-size:1.1rem;font-weight:600;color:#fff;margin-top:.5rem}
.logo span{display:block;font-size:.75rem;color:#9FBCB7}
.nav a{
  display:flex;align-items:center;gap:.7rem;padding:.8rem 1.1rem;
  color:#E2EDEB;font-size:.98rem;border-bottom:1px solid rgba(255,255,255,.06)
}
.nav a:hover{background:var(--deep-3);color:#fff;text-decoration:none}
.nav a.active{background:var(--deep-2);color:#fff;box-shadow:inset 3px 0 0 var(--gold)}
.nav svg{width:17px;height:17px;flex:none;opacity:.85}

/* ══ الشريط العلوي ══ */
.topbar{
  position:sticky;top:0;z-index:30;background:var(--deep);color:#fff;
  display:flex;align-items:center;gap:1rem;padding:.55rem 1.2rem;
  margin-inline-start:var(--sidebar);transition:margin .28s ease
}
.topbar .burger{
  background:none;border:0;color:#fff;cursor:pointer;padding:.25rem;
  display:flex;align-items:center;border-radius:3px
}
.topbar .burger:hover{background:rgba(255,255,255,.12)}
.topbar .burger svg{width:22px;height:22px}
.topbar a{color:#fff;font-size:.88rem;padding:.25rem .8rem;border-radius:3px}
.topbar a:hover{background:rgba(255,255,255,.12);text-decoration:none}
.topbar .spacer{flex:1}
.topbar .lang{border:1px solid rgba(255,255,255,.3);font-size:.78rem}

/* ══ المحتوى ══ */
main{
  margin-inline-start:var(--sidebar);
  padding-block:1.4rem 3rem;
  /* يوسّط البطاقات داخل المساحة المتبقية بجوار القائمة */
  padding-inline:max(clamp(.8rem,3vw,2rem), calc((100% - 66rem) / 2));
  transition:margin .28s ease
}
body.nav-closed .topbar,
body.nav-closed main,
body.nav-closed footer{margin-inline-start:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:5px;padding:1.5rem clamp(1rem,3vw,1.9rem);margin-bottom:1.1rem}
.card > h2{
  font-family:"Cairo","IBM Plex Sans Arabic",sans-serif;font-weight:600;font-size:1.2rem;color:var(--deep);
  margin-bottom:1.1rem;padding-bottom:.75rem;border-bottom:1px solid var(--line)
}

/* البحث */
.search-card{text-align:center}
.search-card h1{font-family:"Cairo","IBM Plex Sans Arabic",sans-serif;font-weight:600;font-size:1.75rem;color:var(--ink);margin-bottom:1.2rem}
.search-card input{
  width:100%;max-width:38rem;padding:.75rem 1rem;font-size:1rem;font-family:inherit;
  border:1px solid var(--line);border-radius:4px;background:#FBFCFC;color:var(--ink)
}
.search-card input:focus{outline:none;border-color:var(--deep-3);box-shadow:0 0 0 3px var(--tint)}
.btns{display:flex;gap:.6rem;justify-content:center;margin-top:.9rem;flex-wrap:wrap}
.btn{
  border:0;border-radius:4px;padding:.6rem 1.6rem;font-family:inherit;font-size:.98rem;
  cursor:pointer;background:var(--deep);color:#fff
}
.btn:hover{background:var(--deep-3)}
.btn.ghost{background:#fff;color:var(--deep);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--deep-3);background:var(--tint)}

/* رأس المدينة */
.city-head h2{
  font-family:"Cairo","IBM Plex Sans Arabic",sans-serif;font-weight:600;font-size:1.35rem;color:var(--deep);
  border:0;padding:0;margin-bottom:.25rem
}
.city-head .crumb,.city-head .hdate{font-size:.92rem;color:var(--ink-3)}

/* كتلة العدّاد */
.countdown{
  background:var(--deep);color:#fff;border-radius:5px;text-align:center;
  padding:1.5rem 1rem;margin:1.2rem 0 1rem;position:relative;overflow:hidden
}
.countdown::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--gold)}
.countdown .lbl{font-family:"Cairo","IBM Plex Sans Arabic",sans-serif;font-size:1.25rem;color:#D4E6E2}
.countdown .val{
  font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:clamp(2.2rem,8vw,3.1rem);
  letter-spacing:.05em;direction:ltr;font-variant-numeric:tabular-nums;line-height:1.3;color:#fff
}
.countdown .sub{font-size:.92rem;color:#C3DAD5}
.localnow{text-align:center;margin-bottom:1.2rem}
.localnow .t{
  font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:1.4rem;color:var(--ink);
  direction:ltr;font-variant-numeric:tabular-nums;letter-spacing:.01em
}
.localnow .s{font-size:.9rem;color:var(--ink-3)}

/* بطاقات الصلوات */
.prayers{display:grid;grid-template-columns:repeat(6,1fr);gap:.55rem}
.prayer{
  border:1px solid var(--line);border-radius:4px;padding:.85rem .3rem;text-align:center;background:#FCFDFD
}
.prayer .t{
  display:flex;justify-content:center;align-items:baseline;gap:.32rem;
  font-size:1.15rem;color:var(--ink)
}
.prayer .t .num{
  font-family:"IBM Plex Mono",monospace;font-weight:600;direction:ltr;
  font-variant-numeric:tabular-nums;letter-spacing:.01em
}
.prayer .t .mer{font-family:"IBM Plex Sans Arabic",sans-serif;font-size:.72em;font-weight:500;color:var(--ink-2)}
.prayer.is-next .t .mer{color:var(--deep)}
.prayer svg{width:26px;height:26px;color:var(--ink-3);margin:.4rem 0}
.prayer .n{font-family:"Cairo","IBM Plex Sans Arabic",sans-serif;font-size:1.08rem;font-weight:600;line-height:1.9}
.prayer.is-next{background:var(--tint);border-color:var(--deep-3)}
.prayer.is-next .t{color:var(--deep);font-weight:500}
.prayer.is-next svg,.prayer.is-next .n{color:var(--deep)}
.prayer.is-past{opacity:.55}
@media(max-width:700px){.prayers{grid-template-columns:repeat(3,1fr)}}

/* صف التفاصيل */
.settings{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:1rem 1.5rem;
  margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line);text-align:center
}
.settings dt{font-size:.88rem;color:var(--ink-3);margin-bottom:.1rem}
.settings dd{font-size:.98rem}
.settings dd.mono{font-size:.98rem;font-weight:500;color:var(--ink);text-align:center}
.settings-btn{margin-top:1.3rem;text-align:center}

/* ══ نافذة الإعدادات ══ */
.backdrop{
  position:fixed;inset:0;background:rgba(15,27,24,.55);z-index:60;
  display:none;align-items:flex-start;justify-content:center;padding:1.2rem;overflow-y:auto
}
body.modal-open .backdrop{display:flex}
.modal{
  background:var(--card);border-radius:6px;width:100%;max-width:48rem;margin-top:4vh;
  box-shadow:0 20px 60px rgba(15,27,24,.28);overflow:hidden
}
.modal-head{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.9rem 1.3rem;background:var(--tint);border-bottom:1px solid var(--line)
}
.modal-head h3{font-family:"Cairo",sans-serif;font-size:1.1rem;font-weight:600;color:var(--deep)}
.modal-close{
  background:none;border:0;cursor:pointer;color:var(--ink-2);line-height:1;
  font-size:1.5rem;padding:.1rem .45rem;border-radius:3px
}
.modal-close:hover{background:rgba(15,27,24,.08);color:var(--ink)}
.modal-body{
  padding:1.5rem 1.3rem;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.3rem
}
.field label{display:block;font-size:.92rem;color:var(--ink-3);margin-bottom:.4rem}
.field select{
  width:100%;padding:.6rem .75rem;font-family:inherit;font-size:.98rem;
  border:1px solid var(--line);border-radius:4px;background:#FBFCFC;color:var(--ink);cursor:pointer
}
.field select:focus{outline:none;border-color:var(--deep-3);box-shadow:0 0 0 3px var(--tint)}
.modal-foot{padding:0 1.3rem 1.4rem;display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap}

/* المدن القريبة */
.near{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.5rem 1.8rem;font-size:.98rem}
.near div{display:flex;gap:.55rem;align-items:baseline}
.near a{white-space:nowrap}
.near .km{font-family:"IBM Plex Mono",monospace;font-size:.86rem;font-weight:500;color:var(--ink-2);direction:ltr}

/* الاقتباسات */
.quote{
  background:var(--gold-soft);border-inline-start:3px solid var(--gold);
  padding:1.2rem 1.4rem;border-radius:0 4px 4px 0;font-size:1.12rem;line-height:2.3;color:var(--ink)
}
.quote .src{display:block;margin-top:.8rem;font-size:.88rem;color:var(--ink-3);font-family:"IBM Plex Sans Arabic",sans-serif}
.sub-src{font-size:.88rem;color:var(--ink-3);margin:-.6rem 0 .9rem}

/* قوائم الروابط */
.linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.45rem 1.4rem;font-size:.98rem}
.linkgrid a{display:flex;align-items:center;gap:.5rem}
.flag{
  width:22px;height:16px;flex:none;object-fit:cover;border-radius:2px;
  border:1px solid var(--line);background:var(--line-2)
}
/* بديل يظهر لو تعذّر تحميل صورة العلم */
.flag-code{
  width:22px;height:16px;flex:none;border-radius:2px;border:1px solid var(--line);
  background:var(--tint);color:var(--deep);font-family:"IBM Plex Mono",monospace;
  font-size:9px;font-weight:600;line-height:14px;text-align:center;letter-spacing:.02em
}

/* علامة المدينة — قبّة صغيرة تسبق كل اسم مدينة */
.city-mark{
  width:1.05em;height:1.05em;flex:none;color:var(--gold);
  transform:translateY(.1em)
}
.near div{display:flex;gap:.5rem;align-items:center}
.dotlist a,.near a{display:inline-flex;align-items:center;gap:.4rem}
.dotlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.5rem 1.2rem;font-size:.98rem}

footer{
  margin-inline-start:var(--sidebar);text-align:center;color:var(--ink-3);
  padding:1.5rem 1rem 2.5rem;transition:margin .28s ease;font-size:.9rem
}
footer a{color:var(--link)}

/* الجوال: القائمة تطفو فوق المحتوى بدل إزاحته */
.scrim{position:fixed;inset:0;background:rgba(18,79,73,.45);z-index:35;display:none}
@media(max-width:900px){
  .topbar,main,footer,
  body.nav-closed .topbar,
  body.nav-closed main,
  body.nav-closed footer{margin-inline-start:0}
  body:not(.nav-closed) .scrim{display:block}
}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ══ إضافات المولّد ══ */
.flag{width:22px;height:16px;flex:none;object-fit:cover;border-radius:2px;border:1px solid var(--line);vertical-align:-3px;margin-inline-end:.5rem}
.datatable{width:100%;border-collapse:collapse;font-size:.98rem}
.datatable th{font-weight:400;text-align:start;color:var(--ink-2);width:40%;padding:.75rem 1rem;background:var(--line-2);border-bottom:1px solid var(--line)}
.datatable td{padding:.75rem 1rem;border-bottom:1px solid var(--line-2);font-weight:500}
.datatable td.num{font-family:"IBM Plex Mono",monospace;direction:ltr;font-variant-numeric:tabular-nums}
.linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.45rem 1.4rem;font-size:.98rem}
.linkgrid a{display:flex;align-items:center;gap:.5rem}
.lead{font-size:1.05rem;line-height:2.1;margin-bottom:1.2rem}
.lead b{color:var(--deep);font-weight:700}
.tabs{display:flex;gap:.35rem;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:5px;padding:.4rem;margin:1.2rem 0 1.1rem}
.tabs a{padding:.55rem 1.15rem;border-radius:4px;font-size:.98rem;color:var(--ink-2)}
.tabs a:hover{background:var(--tint);color:var(--deep);text-decoration:none}
.tabs a[aria-current]{background:var(--deep);color:#fff}
.lead .deg{font-family:"IBM Plex Mono",monospace;font-weight:600;direction:ltr;display:inline-block}
.datatable tr:last-child th,.datatable tr:last-child td{border-bottom:0}
.datatable td.v{font-weight:500;color:var(--ink)}
.compass-wrap{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:.5rem 0 0}
.compass{width:min(320px,80vw);height:auto;touch-action:none}
.compass-read{
  display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:center;text-align:center
}
.compass-read .k{font-size:.85rem;color:var(--ink-3)}
.compass-read .v{
  font-family:"IBM Plex Mono",monospace;font-size:1.35rem;font-weight:600;
  color:var(--deep);direction:ltr
}
.rose-ring{fill:none;stroke:var(--line);stroke-width:1}
.rose-tick{stroke:var(--ink-3);stroke-width:1}
.rose-tick-major{stroke:var(--ink-2);stroke-width:1.8}
.rose-card{font-family:"Cairo",sans-serif;font-size:15px;font-weight:700;fill:var(--ink-2);text-anchor:middle}
.rose-card.n{fill:var(--deep)}
.rose-deg{font-family:"IBM Plex Mono",monospace;font-size:9px;fill:var(--ink-3);text-anchor:middle}
.needle-q{fill:var(--gold)}
.needle-t{fill:var(--ink-3);opacity:.5}
.hint{font-size:.9rem;color:var(--ink-3);text-align:center;max-width:32rem;margin:0 auto}
#map{height:430px;border-radius:5px;border:1px solid var(--line);background:var(--line-2)}
.map-fallback{
  display:flex;align-items:center;justify-content:center;height:100%;
  color:var(--ink-3);font-size:.95rem;text-align:center;padding:1.5rem
}
.leaflet-container{font-family:"IBM Plex Sans Arabic",sans-serif !important}
.citytable{width:100%;border-collapse:collapse;font-size:.95rem;min-width:26rem}
.citytable th{
  font-weight:400;font-size:.85rem;color:var(--ink-3);text-align:start;
  padding:.7rem 1rem;border-bottom:1px solid var(--line);white-space:nowrap
}
.citytable td{padding:.62rem 1rem;border-bottom:1px solid #F0F2EF;white-space:nowrap}
.citytable tbody tr:nth-child(even){background:#FAFBFA}
.citytable tr.self{background:var(--tint)}
.citytable tr.self td{color:var(--deep);font-weight:600}
.citytable td.num{font-family:"IBM Plex Mono",monospace;font-weight:500;direction:ltr;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.citytable tr.self td.num{color:var(--deep)}.backdrop{
  position:fixed;inset:0;background:rgba(15,27,24,.55);z-index:60;
  display:none;align-items:flex-start;justify-content:center;padding:1.2rem;overflow-y:auto
}
.modal{
  background:var(--card);border-radius:6px;width:100%;max-width:48rem;margin-top:4vh;
  box-shadow:0 20px 60px rgba(15,27,24,.28);overflow:hidden
}
.modal-head{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.9rem 1.3rem;background:var(--tint);border-bottom:1px solid var(--line)
}
.modal-close{
  background:none;border:0;cursor:pointer;color:var(--ink-2);line-height:1;
  font-size:1.5rem;padding:.1rem .45rem;border-radius:3px
}
.modal-body{
  padding:1.5rem 1.3rem;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.3rem
}
.field label{display:block;font-size:.92rem;color:var(--ink-3);margin-bottom:.4rem}
.field select{
  width:100%;padding:.6rem .75rem;font-family:inherit;font-size:.98rem;
  border:1px solid var(--line);border-radius:4px;background:#FBFCFC;color:var(--ink);cursor:pointer
}
.modal-foot{padding:0 1.3rem 1.4rem;display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap}
.field select:focus{outline:none;border-color:var(--deep-3);box-shadow:0 0 0 3px var(--tint)}
/* ── جدول الشهر ── */
.table-card{background:var(--card);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.table-scroll{overflow-x:auto}
.table-scroll table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:33rem}
.table-scroll th{font-weight:400;font-size:.78rem;letter-spacing:.05em;color:var(--ink-3);text-align:start;padding:.8rem 1rem;border-bottom:1px solid var(--line);white-space:nowrap}
.table-scroll td{padding:.68rem 1rem;border-bottom:1px solid #F0F2EF;white-space:nowrap}
.table-scroll td.num{font-family:"IBM Plex Mono",monospace;direction:ltr;font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:500}
.table-scroll tr.today{background:var(--tint)}
.table-scroll tr.today td{color:var(--deep);font-weight:600}
.dotlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.5rem 1.2rem;font-size:.98rem}
.dotlist a,.near a{display:inline-flex;align-items:center;gap:.4rem}
.city-mark{width:1.05em;height:1.05em;flex:none;color:var(--gold);transform:translateY(.1em)}
.sub-src{font-size:.88rem;color:var(--ink-3);margin:-.6rem 0 .9rem}
.flag-code{width:22px;height:16px;flex:none;border-radius:2px;border:1px solid var(--line);background:var(--tint);color:var(--deep);font-family:"IBM Plex Mono",monospace;font-size:9px;font-weight:600;line-height:14px;text-align:center}

/* ── شبكة بطاقات الدول ── */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.9rem}
.ccard{
  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:6px;overflow:hidden;text-decoration:none;color:var(--ink);
  transition:border-color .18s, box-shadow .18s, transform .18s
}
.ccard:hover{
  border-color:var(--deep-3);box-shadow:0 4px 14px rgba(18,79,73,.12);
  transform:translateY(-2px);text-decoration:none
}
.ccard .fl{
  aspect-ratio:4/3;display:grid;place-items:center;padding:.9rem;background:#FBFCFC
}
.ccard .fl img{
  width:100%;height:auto;border:1px solid var(--line);border-radius:2px;display:block
}
.ccard .nm{
  padding:.6rem .4rem;text-align:center;font-size:.95rem;font-weight:500;
  color:var(--deep);border-top:1px solid var(--line);background:var(--card)
}
.ccard .ct{display:block;font-size:.75rem;color:var(--ink-3);font-weight:400;margin-top:.1rem}
@media(max-width:520px){.cgrid{grid-template-columns:repeat(2,1fr);gap:.7rem}}

/* ── نتائج البحث ── */
.results{margin-top:1rem;display:none}
.results.on{display:block}
.results a{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.65rem .9rem;border:1px solid var(--line);border-radius:4px;
  background:var(--card);margin-bottom:.4rem;text-decoration:none
}
.results a:hover{border-color:var(--deep-3);background:var(--tint);text-decoration:none}
.results .c{font-size:.85rem;color:var(--ink-3)}
.results .none{color:var(--ink-3);font-size:.95rem;padding:.6rem}
.hidden{display:none!important}