/* ========== المتغيرات ========== */
:root{
  --olive:#4b6016; --olive-dark:#3d4e12; --olive-deep:#33420e;
  --bg:#f4f6f9; --card:#ffffff; --card-alt:#f9fafb;
  --text:#1d232b; --muted:#5f6a76; --border:#e2e6eb;
  --link:#2b4a9b; --gold:#f3e3ae; --gold-text:#e8c76a;
  --green-soft:#eaf5e2; --shadow:0 1px 3px rgba(20,30,10,.12);
  --radius:6px; --sbw:250px; --font:system-ui,"Segoe UI",Tahoma,Arial,sans-serif;
  --az-size:1.05rem; --trans:.35s ease;
}
[data-theme="dark"]{
  --bg:#0f130a; --card:#1a2110; --card-alt:#202a14; --text:#e9ecdf;
  --muted:#a8b096; --border:#2c3618; --link:#9db8ff; --green-soft:#243213;
  --shadow:0 1px 4px rgba(0,0,0,.5); --gold:#3a3c1c; --gold-text:#f0d98c;
}
[hidden]{display:none!important}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);transition:background var(--trans),color var(--trans);font-size:15px;line-height:1.7}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{line-height:1.4}
/* ========== الهيدر ========== */
.topbar{position:fixed;inset-inline:0;top:0;z-index:60;display:flex;align-items:center;gap:.6rem;background:var(--olive);color:#fff;padding:.45rem .8rem;transition:background var(--trans)}
.brand-link{color:#fff;font-weight:600;padding:.3rem .8rem;border-inline-end:1px solid rgba(255,255,255,.25)}
.top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:.5rem}
.icon-btn{background:var(--olive-dark);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:var(--radius);padding:.35rem .6rem;font-size:.95rem;transition:background .2s}
.icon-btn:hover{background:var(--olive-deep)}
.icon-btn.lang{font-weight:700}
.searchbox{position:relative;display:flex;gap:.4rem}
.searchbox input{width:min(320px,42vw);padding:.45rem .7rem;border:1px solid #ccc;border-radius:var(--radius);font-family:inherit}
.ac-list{position:absolute;top:110%;inset-inline-start:0;min-width:260px;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);list-style:none;max-height:280px;overflow:auto;z-index:70;box-shadow:var(--shadow)}
.ac-list li{padding:.45rem .8rem;cursor:pointer}
.ac-list li:hover,.ac-list li.sel{background:var(--green-soft)}
.crumbs{position:fixed;inset-inline:0;top:52px;z-index:59;background:var(--olive-dark);color:#eef2e2;font-size:.8rem;padding:.25rem 1rem}
.crumbs a{color:#fff}
/* ========== الشريط الجانبي ========== */
.sidebar{position:fixed;top:0;bottom:0;inset-inline-start:0;inset-inline-end:auto;width:var(--sbw);background:var(--olive);color:#fff;overflow-y:auto;z-index:80;transition:transform .3s ease,background var(--trans)}
.sidebar .logo{text-align:center;padding:4.6rem 1rem 1rem;border-bottom:1px solid rgba(255,255,255,.15)}
.sidebar .dome{width:74px;height:74px;color:#fff}
.sidebar h1{font-size:1.15rem}
.sidebar small{color:#d8e0c2}
.sidebar nav{display:flex;flex-direction:column}
.sidebar nav a{display:flex;align-items:center;gap:.6rem;color:#fff;padding:.75rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.12);font-size:.92rem;transition:background .2s}
.sidebar nav a:hover,.sidebar nav a.active{background:var(--olive-dark);text-decoration:none}
.sidebar .ic{font-size:1.05rem}
/* ========== المحتوى ========== */
#main{margin-inline-start:var(--sbw);padding:6.4rem 1.2rem 2rem;max-width:1180px}
.page-head{background:var(--card);box-shadow:var(--shadow);text-align:center;padding:1.6rem 1rem;margin-bottom:1.2rem;border-radius:var(--radius)}
.page-head h2{font-size:1.5rem}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.3rem 1.4rem;margin-bottom:1.2rem;transition:background var(--trans)}
.card h3{margin-bottom:.8rem;font-size:1.05rem}
.card h4{font-size:.9rem;margin:.4rem 0 .15rem}
.link-title{color:var(--link);font-size:1.05rem}
.muted{color:var(--muted)}
.small-txt{font-size:.8rem}
.center{text-align:center}
/* عدّاد الصلاة */
.count-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin:1rem 0}
.countdown-box{background:var(--olive);color:var(--gold-text);border-radius:var(--radius);padding:.6rem 1.6rem;text-align:center;font-size:1.7rem;font-weight:800;letter-spacing:1px;direction:ltr}
.countdown-box small{display:block;font-size:.72rem;font-weight:400;color:#f4ecd2}
.now-box{direction:ltr;text-align:center}
.now-box strong{font-size:1.25rem}
.now-box small{display:block;color:var(--muted)}
.prayer-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.7rem;margin:1rem 0}
.pbox{border:1px solid #9dbb7a;background:var(--card);border-radius:var(--radius);text-align:center;padding:.7rem .4rem;transition:transform .2s,box-shadow .2s}
.pbox:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.pbox.next{background:var(--green-soft);border-color:var(--olive)}
.pbox .t{direction:ltr;font-weight:700}
.pbox .icn{font-size:1.5rem;display:block;margin:.3rem 0}
.details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem;margin:1rem 0}
/* جداول */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.85rem}
.tbl th,.tbl td{padding:.45rem .6rem;border-bottom:1px solid var(--border);text-align:start;white-space:nowrap}
.tbl thead th{background:var(--card-alt);font-weight:700}
.tbl tbody tr:nth-child(even){background:var(--card-alt)}
.tbl tbody tr:hover{background:var(--green-soft)}
.tbl td[dir="ltr"]{text-align:right}
/* أزرار */
.btn{background:var(--olive);color:#fff;border:none;border-radius:var(--radius);padding:.5rem 1.2rem;font-size:.9rem;transition:background .2s,transform .1s}
.btn:hover{background:var(--olive-dark)}
.btn:active{transform:scale(.97)}
.btn.small{padding:.3rem .8rem;font-size:.82rem}
.btn.big{padding:.7rem 2rem;font-size:1rem}
.btn.outline{background:transparent;color:var(--text);border:1px solid var(--olive)}
.btn.primary{background:var(--olive)}
/* شبكات */
.flags-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.9rem}
.flag-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);text-align:center;padding:.6rem;transition:transform .2s,box-shadow .2s;cursor:pointer}
.flag-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.flag-card .fl{font-size:2.6rem;display:block}
.flag-card span{font-size:.82rem;color:var(--link)}
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.4rem 1rem}
.chips a{padding:.25rem 0;font-size:.9rem}
.chips a::before{content:"✳";color:var(--olive);margin-inline-end:.35rem;font-size:.75rem}
/* اقتباسات */
.quote{background:var(--card-alt);border-inline-end:4px solid var(--olive);padding:.9rem 1rem;border-radius:var(--radius);font-size:.95rem;margin:.5rem 0}
/* FAQ */
.faq details{border-bottom:1px solid var(--border);padding:.5rem 0}
.faq summary{cursor:pointer;font-weight:700;color:var(--text)}
.faq summary::marker{color:var(--olive)}
.faq p{padding:.5rem .3rem;color:var(--muted)}
/* القبلة */
.qibla-flex{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:flex-start}
.qibla-info{flex:1;min-width:260px}
.compass{width:190px;height:190px;flex:none}
.compass svg{width:100%;height:100%}
#compass .needle{transition:transform 1s cubic-bezier(.3,1.4,.4,1);transform-origin:50% 50%}
.map{width:100%;border-radius:var(--radius);background:#bfe0ea;cursor:grab;margin-top:1rem}
[data-theme="dark"] .map{background:#17303a}
/* القمر */
.moon-hero{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.moon-stats{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:1rem;align-items:stretch}
.moon-card{background:var(--olive);color:#fff;border-radius:var(--radius);padding:1rem;text-align:center;min-width:150px;display:flex;flex-direction:column;gap:.2rem;align-items:center}
.moon-card strong{font-size:1.05rem}
.moon-card em{font-style:normal;font-size:.8rem;color:#d9e2c0}
.moon-stats .tbl-wrap{flex:1;min-width:280px}
.moon-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.7rem}
.moon-day{background:var(--olive);color:#fff;border-radius:var(--radius);text-align:center;padding:.6rem .3rem;font-size:.78rem}
.moon-day canvas{display:block;margin:.3rem auto}
.lunar-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.lc-head,.lc-cell{border:1px solid var(--border);border-radius:4px;text-align:center;padding:.4rem .15rem;font-size:.72rem;background:var(--card)}
.lc-head{background:var(--card-alt);font-weight:700}
.lc-cell .em{font-size:1.15rem;display:block}
/* الزكاة */
fieldset{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1rem;padding:1rem}
legend{background:var(--card-alt);padding:.2rem .9rem;border-radius:4px;font-weight:700;font-size:.88rem}
label{display:block;font-size:.83rem;margin:.5rem 0 .2rem}
input[type=number],select{width:100%;padding:.5rem .6rem;border:1px solid #c8cdd4;border-radius:var(--radius);background:var(--card);color:var(--text);font-family:inherit}
.frow{display:flex;gap:.6rem;flex-wrap:wrap}
.frow>*{flex:1}
.frow.three input,.frow.three select{flex:1}
.zakat-result{margin-top:1.2rem;border:2px solid var(--olive);border-radius:var(--radius);padding:1rem;background:var(--green-soft)}
.zakat-result .big-num{font-size:1.6rem;font-weight:800;color:var(--olive)}
[data-theme="dark"] .zakat-result .big-num{color:var(--gold-text)}
/* تبويبات */
.tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:1rem;flex-wrap:wrap}
.tab{background:var(--card-alt);border:none;padding:.55rem 1.4rem;font-weight:700;color:var(--text);border-radius:var(--radius) var(--radius) 0 0}
.tab.active{background:var(--olive);color:#fff}
.conv-panel{margin:1rem 0}
/* الأذكار */
.duas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem}
.dua-tile{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);text-align:center;padding:1rem .5rem;cursor:pointer;transition:transform .2s,box-shadow .2s}
.dua-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.dua-tile .em{font-size:2rem;display:block;margin-bottom:.4rem}
.dua-tile span{color:var(--link);font-size:.9rem}
.toolbar{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.azkar-list{font-size:var(--az-size)}
.azkar-card{background:var(--card-alt);border-inline-end:4px solid var(--olive);border-radius:var(--radius);padding:.8rem 1rem;margin-bottom:.7rem;display:flex;gap:.7rem;align-items:flex-start;justify-content:space-between}
.azkar-card p{flex:1}
.azkar-card .ref{display:block;font-size:.72rem;color:var(--muted);margin-top:.3rem}
.counter-btn{flex:none;min-width:44px;border:1px solid var(--olive);background:var(--card);color:var(--olive);border-radius:50%;font-weight:800;padding:.4rem .6rem}
.counter-btn.done{background:var(--olive);color:#fff}
/* التعداد */
.pop-counter{font-size:clamp(1.8rem,5vw,3rem);font-weight:800;color:var(--olive);direction:ltr}
[data-theme="dark"] .pop-counter{color:var(--gold-text)}
/* التقويم السنوي */
.year-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.hmonth{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.hmonth h5{background:#565a52;color:#fff;margin:0;padding:.35rem .7rem;font-size:.9rem}
.hmonth .gmonths{display:flex}
.hmonth .gm{flex:1;text-align:center;font-size:.75rem;padding:.2rem;background:#b98a4b;color:#fff}
.hmonth .gm.alt{background:var(--olive)}
.hmonth table{width:100%;border-collapse:collapse;font-size:.75rem}
.hmonth th{background:var(--card-alt);padding:.25rem;font-size:.68rem}
.hmonth td{border:1px solid var(--border);text-align:center;padding:.3rem .1rem;vertical-align:top}
.hmonth td .h{font-weight:700}
.hmonth td .g{display:block;font-size:.65rem;color:#b98a4b}
.cal-nav{display:flex;gap:.6rem;justify-content:center;margin-top:1rem;flex-wrap:wrap}
/* مودال */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal-box{width:min(430px,100%);padding:1.4rem}
.modal-box label{margin-top:.8rem}
.modal-box .frow{margin-top:1rem}
/* الفوتر */
.footer{margin-inline-start:var(--sbw);border-top:1px solid var(--border);background:var(--card-alt);text-align:center;padding:1.2rem;font-size:.82rem;color:var(--muted)}
/* حركات الكشف */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.shown{opacity:1;transform:none}
/* استجابة */
@media(max-width:900px){
  .sidebar{transform:translateX(100%)}
  [dir="ltr"] .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:none}
  #main,.footer{margin-inline-start:0}
  .searchbox input{width:44vw}
}
@media print{
  .topbar,.sidebar,.crumbs,.footer,.no-print,.cal-nav{display:none!important}
  #main{margin:0;padding:0}
  .card{box-shadow:none;border:1px solid #ccc}
}