*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* ═══ نظام التباعد — 8pt Grid ═══ */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;
  --sp-6:24px;--sp-7:32px;--sp-8:40px;--sp-9:48px;--sp-10:64px;
  /* ═══ الألوان ═══ */
  --bg:#060E1B;--bg2:#0C1829;--card:#111E35;--card2:#162542;
  --gold:#C9A84C;--gold-l:#E8CF7A;--gold-dim:rgba(201,168,76,0.15);
  --teal:#0EA698;--teal-g:#2DDBC8;--teal-dim:rgba(14,166,152,0.12);
  --white:#F2EDE4;--dim:#6B7A94;--dim2:#3D4F6A;--green:#3DCC7A;
  --red:#E74C3C;--red-g:#FF6B6B;--red-dim:rgba(231,76,60,0.15);
  --radius:var(--sp-4);--border:rgba(255,255,255,0.06);
  --shadow:0 var(--sp-1) var(--sp-6) rgba(0,0,0,0.3);--base:16px;
  /* ═══ الحركة ═══ */
  --spring:cubic-bezier(0.34,1.56,0.64,1);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
}
[data-theme="light"]{
  --bg:#F0EDE6;--bg2:#E8E4DB;--card:#FFFFFF;--card2:#F8F5EF;
  --white:#1A1A2E;--dim:#6B7280;--dim2:#D1D5DB;
  --gold-dim:rgba(201,168,76,0.1);--teal-dim:rgba(14,166,152,0.08);
  --red-dim:rgba(231,76,60,0.1);
  --border:rgba(0,0,0,0.08);--shadow:0 var(--sp-1) var(--sp-6) rgba(0,0,0,0.08);
}
[data-fs="small"]{--base:13px}[data-fs="medium"]{--base:16px}[data-fs="large"]{--base:20px}

body{font-family:'IBM Plex Sans Arabic',sans-serif;background:var(--bg);color:var(--white);
  min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-size:var(--base);
  transition:background .4s var(--ease-out),color .4s var(--ease-out)}

/* ─── Islamic Geometric Background ─── */
.islamic-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.islamic-bg svg{position:absolute;opacity:.03;transition:opacity .4s}
[data-theme="light"] .islamic-bg svg{opacity:.04}
.islamic-bg .pat1{top:-10%;right:-5%;width:600px;height:600px;animation:patFloat1 40s ease-in-out infinite}
.islamic-bg .pat2{bottom:-15%;left:-8%;width:500px;height:500px;animation:patFloat2 50s ease-in-out infinite}
.islamic-bg .pat3{top:30%;left:50%;width:400px;height:400px;animation:patFloat3 35s ease-in-out infinite}
@keyframes patFloat1{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(30deg) scale(1.08)}}
@keyframes patFloat2{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(-25deg) scale(1.05)}}
@keyframes patFloat3{0%,100%{transform:rotate(0deg) translateY(0)}50%{transform:rotate(20deg) translateY(-30px)}}

.radial-glow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 30% 0%,rgba(14,166,152,.07) 0%,transparent 60%),
  radial-gradient(ellipse at 70% 100%,rgba(201,168,76,.05) 0%,transparent 60%)}
[data-theme="light"] .radial-glow{
  background:radial-gradient(ellipse at 30% 0%,rgba(14,166,152,.04) 0%,transparent 60%),
  radial-gradient(ellipse at 70% 100%,rgba(201,168,76,.03) 0%,transparent 60%)}

.dashboard{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:var(--sp-5) var(--sp-6) var(--sp-8);min-height:100vh}

/* ─── Header ─── */
.header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.header-right{text-align:right}
.header-title{font-size:1.6em;font-weight:700;display:flex;align-items:center;gap:var(--sp-2);justify-content:flex-end}
.header-location{font-size:.8em;color:var(--dim);margin-top:var(--sp-1);display:flex;align-items:center;gap:var(--sp-1)}
.header-left{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.ctrl-btn{background:var(--card);border:1px solid var(--border);color:var(--dim);
  border-radius:var(--sp-3);padding:var(--sp-3) var(--sp-4);cursor:pointer;font-family:inherit;font-size:.75em;
  font-weight:600;transition:all .3s var(--ease-out);display:flex;align-items:center;gap:var(--sp-2);white-space:nowrap;
  min-height:44px;min-width:44px;justify-content:center;-webkit-tap-highlight-color:transparent}
.ctrl-btn:hover,.ctrl-btn.active{background:var(--teal-dim);color:var(--teal-g);border-color:rgba(45,219,200,.25)}
.ctrl-btn:active{transform:scale(0.96);transition-duration:.1s}
.ctrl-btn:focus-visible{outline:2px solid var(--teal-g);outline-offset:2px}
.fs-group{display:flex;border-radius:var(--sp-3);overflow:hidden;border:1px solid var(--border)}
.fs-group .ctrl-btn{border:none;border-radius:0;border-left:1px solid var(--border);min-width:40px;padding:var(--sp-3)}
.fs-group .ctrl-btn:last-child{border-left:none}

/* ─── Date & Clock ─── */
.datetime-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-4);
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--sp-5) var(--sp-6);margin-bottom:var(--sp-4);transition:all .4s var(--ease-out)}
.clock-display{font-size:3em;font-weight:700;letter-spacing:2px;direction:ltr;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--white) 20%,var(--teal-g) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
[data-theme="light"] .clock-display{background:linear-gradient(180deg,#1A1A2E 20%,var(--teal) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.date-center{text-align:center}
.date-weekday{font-family:'Amiri',serif;font-size:1.1em;font-weight:700;color:var(--gold-l)}
.date-greg{font-size:.85em;color:var(--dim);margin-top:var(--sp-1)}
.date-hijri{text-align:left}
.hijri-day{font-family:'Amiri',serif;font-size:1em;font-weight:700;color:var(--gold-l)}
.hijri-year{font-size:.72em;color:var(--gold);margin-top:var(--sp-1)}
.islamic-greeting{font-size:.85em;color:var(--teal-g);text-align:center;margin-bottom:var(--sp-3);font-weight:600}

/* ─── Quran Verse Banner ─── */
.quran-banner{background:linear-gradient(135deg,var(--gold-dim),rgba(201,168,76,.05));border:1px solid rgba(201,168,76,.15);
  border-radius:var(--radius);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-4);text-align:center;transition:all .4s var(--ease-out)}
.quran-text{font-family:'Amiri',serif;font-size:1.15em;line-height:2.2;color:var(--white)}
.quran-ref{font-size:.72em;color:var(--gold);margin-top:var(--sp-2);font-weight:600}

/* ─── Next Prayer Card ─── */
.next-card{position:relative;border-radius:var(--radius);padding:var(--sp-6) var(--sp-7);margin-bottom:var(--sp-4);overflow:hidden;
  background:linear-gradient(135deg,rgba(14,166,152,.18) 0%,rgba(14,166,152,.05) 100%);
  border:1px solid rgba(45,219,200,.2);transition:all .5s var(--ease-out)}
.next-card.state-adhan{
  background:linear-gradient(135deg,rgba(201,168,76,.22) 0%,rgba(201,168,76,.06) 100%);
  border-color:rgba(232,207,122,.4);animation:adhanGlow 1.5s ease-in-out infinite}
.next-card.state-iqama{
  background:linear-gradient(135deg,rgba(231,76,60,.2) 0%,rgba(231,76,60,.06) 100%);
  border-color:rgba(255,107,107,.4);animation:iqamaGlow 1s ease-in-out infinite}
@keyframes adhanGlow{0%,100%{box-shadow:0 0 20px rgba(201,168,76,.2)}50%{box-shadow:0 0 50px rgba(201,168,76,.45),0 0 80px rgba(201,168,76,.15)}}
@keyframes iqamaGlow{0%,100%{box-shadow:0 0 20px rgba(231,76,60,.2)}50%{box-shadow:0 0 50px rgba(231,76,60,.5),0 0 80px rgba(231,76,60,.2)}}

.next-label{font-size:.75em;font-weight:700;text-transform:uppercase;letter-spacing:2px;
  display:flex;align-items:center;gap:8px;margin-bottom:14px;color:var(--teal-g)}
.next-card.state-adhan .next-label{color:var(--gold-l)}
.next-card.state-iqama .next-label{color:var(--red-g)}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--teal-g);animation:pulse 2s ease infinite}
.next-card.state-adhan .pulse-dot{background:var(--gold-l)}
.next-card.state-iqama .pulse-dot{background:var(--red-g)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

.next-content{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-4)}
.next-prayer-name{font-size:1.8em;font-weight:800}
.next-prayer-time{font-size:.9em;color:var(--dim);margin-top:var(--sp-1)}
.next-card.state-adhan .next-prayer-time{color:var(--gold-l)}
.next-card.state-iqama .next-prayer-time{color:var(--red-g);font-weight:700}
.countdown-box{text-align:left;direction:ltr}
.countdown-val{font-size:2.8em;font-weight:900;color:var(--teal-g);font-variant-numeric:tabular-nums;line-height:1}
.next-card.state-adhan .countdown-val{color:var(--gold-l)}
.next-card.state-iqama .countdown-val{color:var(--red-g)}
.countdown-unit{font-size:.7em;color:var(--dim);margin-top:var(--sp-1)}
.countdown-val{transition:opacity .15s ease}

.iqama-active-text{display:none;text-align:center;padding:var(--sp-3) 0}
.iqama-active-text .iqt-main{font-size:1.4em;font-weight:700;color:var(--red-g);animation:iqamaBlink 1.2s ease infinite}
.iqama-active-text .iqt-sub{font-size:.85em;color:var(--dim);margin-top:var(--sp-1)}
.next-card.state-iqama .iqama-active-text{display:block}
.next-card.state-iqama .countdown-box{display:none}
@keyframes iqamaBlink{0%,100%{opacity:1}50%{opacity:.5}}

.progress-wrap{margin-top:var(--sp-4)}
.progress-labels{display:flex;justify-content:space-between;font-size:.7em;color:var(--dim);margin-bottom:var(--sp-2)}
.progress-bar{height:var(--sp-1);border-radius:var(--sp-1);background:rgba(255,255,255,.06);overflow:hidden}
[data-theme="light"] .progress-bar{background:rgba(0,0,0,.06)}
.progress-fill{height:100%;border-radius:var(--sp-1);background:linear-gradient(90deg,var(--teal),var(--teal-g));transition:width 1s linear}
.next-card.state-adhan .progress-fill{background:linear-gradient(90deg,var(--gold),var(--gold-l))}
.next-card.state-iqama .progress-fill{background:linear-gradient(90deg,var(--red),var(--red-g))}

/* ─── Prayer Grid ─── */
.section-title{font-size:.78em;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:2px;margin:var(--sp-4) 0 var(--sp-3);
  display:flex;align-items:center;gap:var(--sp-2)}
.prayers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-4)}

.prayer-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--sp-4) var(--sp-3);text-align:center;transition:all .5s var(--ease-out);position:relative;overflow:hidden}
.prayer-card .p-icon{font-size:1.6em;margin-bottom:var(--sp-2)}
.prayer-card .p-name{font-size:1em;font-weight:700;margin-bottom:var(--sp-2)}
.prayer-card .p-row{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-1) 0;
  border-top:1px solid var(--border);font-size:.82em}
.prayer-card .p-label{color:var(--dim);font-weight:600}
.prayer-card .p-val{font-weight:700;direction:ltr;font-variant-numeric:tabular-nums}
.prayer-card .p-val.iqama{color:var(--gold-l)}
.prayer-card .p-status{margin-top:var(--sp-2);font-size:.75em;font-weight:700;min-height:1.4em}
.prayer-card .p-cd{direction:ltr;font-variant-numeric:tabular-nums}

.prayer-card.state-upcoming .p-status{color:var(--teal-g)}
.prayer-card.state-done{opacity:.45}
.prayer-card.state-done .p-status{color:var(--green)}

.prayer-card.state-adhan{border-color:rgba(232,207,122,.4);
  background:linear-gradient(135deg,rgba(201,168,76,.15),rgba(201,168,76,.04));
  animation:cardAdhan 1.8s ease-in-out infinite;transform:scale(1.02)}
@keyframes cardAdhan{0%,100%{box-shadow:0 0 15px rgba(201,168,76,.15)}50%{box-shadow:0 0 35px rgba(201,168,76,.35)}}
.prayer-card.state-adhan .p-status{color:var(--gold-l);font-weight:800}
.prayer-card.state-adhan .p-name{color:var(--gold-l)}

.prayer-card.state-iqama{border-color:rgba(255,107,107,.4);
  background:linear-gradient(135deg,rgba(231,76,60,.18),rgba(231,76,60,.04));
  animation:cardIqama 1s ease-in-out infinite;transform:scale(1.02)}
@keyframes cardIqama{0%,100%{box-shadow:0 0 15px rgba(231,76,60,.15)}50%{box-shadow:0 0 35px rgba(231,76,60,.4)}}
.prayer-card.state-iqama .p-status{color:var(--red-g);font-weight:800}
.prayer-card.state-iqama .p-name{color:var(--red-g)}

.prayer-card.sunrise{background:linear-gradient(135deg,rgba(201,168,76,.08),var(--card));border-color:rgba(201,168,76,.12)}

/* ─── Info Grid ─── */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--sp-2);margin-bottom:var(--sp-4)}
.info-card{background:var(--card);border:1px solid var(--border);border-radius:var(--sp-3);padding:var(--sp-3);text-align:center;transition:all .4s var(--ease-out)}
.info-card .i-icon{font-size:1.4em;margin-bottom:var(--sp-1)}
.info-card .i-label{font-size:.65em;color:var(--dim);font-weight:600;letter-spacing:.5px}
.info-card .i-val{font-size:1em;font-weight:700;margin-top:var(--sp-1)}
.info-card .i-val.gold{color:var(--gold-l)}

/* ─── Dhikr ─── */
.dhikr-card{background:linear-gradient(135deg,var(--card2),var(--card));border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--sp-6);text-align:center;position:relative;overflow:hidden;
  transition:all .4s var(--ease-out);display:flex;flex-direction:column;justify-content:center}
.dhikr-card::before{content:'❝';position:absolute;top:calc(-1 * var(--sp-2));right:var(--sp-4);font-size:4em;color:rgba(201,168,76,.06)}
.dhikr-label{font-size:.7em;color:var(--gold);font-weight:700;letter-spacing:2px;margin-bottom:var(--sp-3)}
.dhikr-text{font-family:'Amiri',serif;font-size:1.15em;line-height:2.2;color:var(--white)}
.dhikr-source{font-size:.72em;color:var(--dim);margin-top:var(--sp-2)}
.dhikr-nav{display:flex;justify-content:center;gap:var(--sp-3);margin-top:var(--sp-3)}
.dhikr-btn{background:var(--dim2);border:none;color:var(--dim);width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.85em;
  transition:all .2s var(--spring);-webkit-tap-highlight-color:transparent}
.dhikr-btn:hover{background:var(--gold-dim);color:var(--gold-l)}
.dhikr-btn:active{transform:scale(0.96)}
.dhikr-btn:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}

/* ─── Sunnah Row (Horizontal) ─── */
.sunnah-row{display:flex;gap:var(--sp-3);margin-bottom:var(--sp-4);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sunnah-row::-webkit-scrollbar{display:none}
.sn-card{flex:1;min-width:140px;background:var(--card);border:1px solid var(--border);border-radius:var(--sp-3);
  padding:var(--sp-4) var(--sp-3);text-align:center;transition:all .4s var(--ease-out);display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.sn-card:hover{border-color:rgba(45,219,200,.2);transform:translateY(-2px)}
.sn-icon{font-size:1.5em}
.sn-name{font-size:.9em;font-weight:700}
.sn-badges{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center;margin-top:var(--sp-1)}
.sn-badge{font-size:.7em;font-weight:700;padding:var(--sp-1) var(--sp-3);border-radius:var(--sp-5);letter-spacing:.3px}
.sn-badge.before{background:var(--teal-dim);color:var(--teal-g);border:1px solid rgba(45,219,200,.2)}
.sn-badge.after{background:var(--gold-dim);color:var(--gold-l);border:1px solid rgba(232,207,122,.2)}

/* ─── Extras Row (Dhikr + Hadith) ─── */
.extras-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-bottom:var(--sp-4);align-items:stretch}
.extras-row>.dhikr-card,.extras-row>.hadith-card{margin:0}
.hadith-card{background:var(--card);border:1px solid var(--border);border-radius:var(--sp-3);padding:var(--sp-4) var(--sp-5);
  transition:all .4s var(--ease-out);display:flex;flex-direction:column;justify-content:center}
.hadith-card .h-title{font-size:.85em;font-weight:700;margin-bottom:var(--sp-2);display:flex;align-items:center;gap:var(--sp-2)}
.hadith-card .h-text{font-family:'Amiri',serif;font-size:.95em;line-height:2;color:var(--white)}
.hadith-card .h-src{font-size:.7em;color:var(--dim);margin-top:var(--sp-2)}

/* ─── Prohibited Times ─── */
.nahy-card{background:var(--card);border:1px solid var(--border);border-radius:var(--sp-3);padding:var(--sp-4);margin-bottom:var(--sp-4);transition:all .4s var(--ease-out)}
.nahy-card .n-title{font-size:.85em;font-weight:700;margin-bottom:var(--sp-2);display:flex;align-items:center;gap:var(--sp-2);color:var(--red-g)}
.nahy-card .n-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-2)}
.nahy-card .n-item{font-size:.78em;color:var(--dim);padding:var(--sp-2) var(--sp-3);background:var(--red-dim);border-radius:var(--sp-2);display:flex;align-items:center;gap:var(--sp-2)}
.nahy-card .n-item .n-time{color:var(--white);font-weight:700;font-variant-numeric:tabular-nums;direction:ltr}

/* ─── Sync & Footer ─── */
.sync-dot{position:fixed;bottom:var(--sp-3);left:var(--sp-3);z-index:99;width:var(--sp-2);height:var(--sp-2);border-radius:50%;
  background:var(--green);opacity:0;transition:opacity .3s}
.sync-dot.active{opacity:.6;animation:syncP 1.5s ease}
@keyframes syncP{0%{opacity:0}30%{opacity:.6}100%{opacity:0}}

.footer{text-align:center;padding:var(--sp-4) 0;font-size:.68em;color:var(--dim);border-top:1px solid var(--border)}

/* ─── Animations — Spring Stagger ─── */
.fade-in{animation:fadeIn .5s var(--spring) both}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.d1{animation-delay:.05s}.d2{animation-delay:.1s}.d3{animation-delay:.15s}
.d4{animation-delay:.2s}.d5{animation-delay:.25s}.d6{animation-delay:.3s}

/* ─── Responsive: Tablet ─── */
@media(max-width:768px){
  .dashboard{padding:var(--sp-3) var(--sp-4) var(--sp-7)}
  .header{flex-direction:column;text-align:center;gap:var(--sp-3)}
  .header-right{text-align:center}
  .header-title{justify-content:center;font-size:1.4em}
  .header-left{justify-content:center}
  .clock-display{font-size:2.6em}
  .datetime-bar{flex-direction:column;text-align:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5)}
  .date-hijri{text-align:center}
  .quran-banner{padding:var(--sp-3) var(--sp-4)}
  .quran-text{font-size:1.05em}
  .next-card{padding:var(--sp-5) var(--sp-5)}
  .next-prayer-name{font-size:1.4em}
  .countdown-val{font-size:2.2em}
  .prayers-grid{grid-template-columns:1fr 1fr;gap:var(--sp-2)}
  .info-grid{grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
  .extras-row{grid-template-columns:1fr}
  .sunnah-row{flex-wrap:wrap;gap:var(--sp-2)}
  .sn-card{min-width:calc(50% - 4px);flex:unset}
  .nahy-card .n-grid{grid-template-columns:1fr}
  .islamic-bg .pat1{width:300px;height:300px}
  .islamic-bg .pat2{width:250px;height:250px}
  .islamic-bg .pat3{display:none}
}

/* ─── Responsive: Mobile ─── */
@media(max-width:480px){
  .dashboard{padding:var(--sp-3) var(--sp-3) var(--sp-6)}
  .header-title{font-size:1.25em}
  .ctrl-btn{padding:var(--sp-2) var(--sp-3);font-size:.7em}
  .clock-display{font-size:2.2em}
  .datetime-bar{padding:var(--sp-3)}
  .quran-text{font-size:.95em;line-height:2}
  .next-card{padding:var(--sp-4)}
  .next-prayer-name{font-size:1.25em}
  .countdown-val{font-size:1.8em}
  .countdown-unit{font-size:.65em}
  .next-content{gap:var(--sp-3)}
  .prayers-grid{grid-template-columns:1fr 1fr;gap:var(--sp-2)}
  .prayer-card{padding:var(--sp-3) var(--sp-3)}
  .prayer-card .p-icon{font-size:1.3em;margin-bottom:var(--sp-1)}
  .prayer-card .p-name{font-size:.9em;margin-bottom:var(--sp-2)}
  .prayer-card .p-row{font-size:.78em;padding:var(--sp-1) 0}
  .prayer-card .p-status{font-size:.7em}
  .info-grid{grid-template-columns:1fr 1fr;gap:var(--sp-2)}
  .info-card{padding:var(--sp-3) var(--sp-3)}
  .info-card .i-icon{font-size:1.2em}
  .info-card .i-val{font-size:.9em}
  .sunnah-row{gap:var(--sp-2)}
  .sn-card{min-width:calc(50% - 4px);padding:var(--sp-3) var(--sp-3)}
  .sn-icon{font-size:1.2em}
  .sn-name{font-size:.82em}
  .sn-badge{font-size:.65em;padding:var(--sp-1) var(--sp-2)}
  .dhikr-card{padding:var(--sp-4) var(--sp-3)}
  .dhikr-text{font-size:1em;line-height:2}
  .hadith-card{padding:var(--sp-3)}
  .hadith-card .h-text{font-size:.88em;line-height:1.9}
  .nahy-card{padding:var(--sp-3)}
  .nahy-card .n-item{font-size:.72em;padding:var(--sp-2) var(--sp-2)}
  .section-title{font-size:.7em;margin:var(--sp-3) 0 var(--sp-2)}
  .footer{font-size:.62em;padding:var(--sp-3) 0}
}

/* ─── Responsive: Desktop ─── */
@media(min-width:1024px){.prayers-grid{grid-template-columns:repeat(6,1fr)}}

/* ─── أداء: will-change للعناصر المتحركة ─── */
.prayer-card.state-adhan,.prayer-card.state-iqama,.next-card.state-adhan,.next-card.state-iqama{will-change:box-shadow}
.islamic-bg svg{will-change:transform}
@media(prefers-reduced-motion:reduce){
  *,.fade-in{animation:none!important;transition-duration:.01ms!important}
}

/* ─── شارة عدم الاتصال ─── */
.offline-banner{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--red);color:#fff;
  text-align:center;padding:var(--sp-2) var(--sp-4);font-size:.78em;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  transform:translateY(-100%);transition:transform .4s var(--ease-out)}
.offline-banner.visible{transform:translateY(0)}

/* ─── Toast ─── */
.toast-container{position:fixed;bottom:var(--sp-6);left:50%;transform:translateX(-50%);z-index:200;
  display:flex;flex-direction:column;gap:var(--sp-2);align-items:center;pointer-events:none}
.toast{background:var(--card);border:1px solid var(--border);color:var(--white);
  padding:var(--sp-3) var(--sp-5);border-radius:var(--sp-3);font-size:.82em;font-weight:600;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:var(--sp-2);
  animation:toastIn .4s var(--spring) both;pointer-events:auto;white-space:nowrap}
.toast.success{border-color:rgba(61,204,122,.3);color:var(--green)}
.toast.error{border-color:rgba(231,76,60,.3);color:var(--red-g)}
.toast.out{animation:toastOut .3s ease both}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{to{opacity:0;transform:translateY(20px) scale(.95)}}

/* ─── قسم المزامنة ─── */
.sync-section{text-align:center;padding:var(--sp-4) 0;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.sync-btn{background:var(--card);border:1px solid var(--border);color:var(--teal-g);
  border-radius:var(--sp-3);padding:var(--sp-3) var(--sp-5);cursor:pointer;font-family:inherit;
  font-size:.82em;font-weight:600;display:flex;align-items:center;gap:var(--sp-2);
  transition:all .3s var(--ease-out);min-height:44px;-webkit-tap-highlight-color:transparent}
.sync-btn:hover{background:var(--teal-dim);border-color:rgba(45,219,200,.25)}
.sync-btn:active{transform:scale(0.96)}
.sync-btn:focus-visible{outline:2px solid var(--teal-g);outline-offset:2px}
.sync-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.sync-btn .spinning{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sync-status{font-size:.72em;color:var(--dim);opacity:.6}
.sync-error{background:var(--red-dim);border:1px solid rgba(231,76,60,.2);border-radius:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);font-size:.78em;color:var(--red-g);display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2)}
.sync-error button{background:var(--red-dim);border:1px solid rgba(231,76,60,.3);color:var(--red-g);
  border-radius:var(--sp-2);padding:var(--sp-1) var(--sp-3);cursor:pointer;font-family:inherit;font-size:.8em;
  min-height:44px;min-width:44px}

/* ─── بوصلة القبلة ─── */
.qibla-compass{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;border:2px solid var(--gold-dim);position:relative;margin-top:var(--sp-1)}
.qibla-needle{transition:transform .6s var(--spring);color:var(--gold-l)}

/* ─── خلفية ديناميكية ─── */
.dynamic-bg{position:fixed;inset:0;z-index:-1;transition:background 2s ease;pointer-events:none}

/* ─── رابط تخطي المحتوى ─── */
.skip-link{position:absolute;top:-100px;left:var(--sp-4);background:var(--teal);color:#fff;
  padding:var(--sp-2) var(--sp-4);border-radius:0 0 var(--sp-2) var(--sp-2);z-index:999;
  font-weight:700;font-size:.85em;transition:top .3s}
.skip-link:focus{top:0}

/* ─── Modal ─── */
.modal-overlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease-out),visibility .3s}
.modal-overlay.open{opacity:1;visibility:visible}
.modal{background:var(--card);border:1px solid var(--border);border-radius:var(--sp-4);
  width:90%;max-width:720px;max-height:80vh;overflow-y:auto;padding:var(--sp-6);
  box-shadow:var(--shadow);transform:translateY(20px) scale(.97);
  transition:transform .4s var(--spring)}
.modal-overlay.open .modal{transform:translateY(0) scale(1)}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4)}
.modal-header h2{font-size:1.1em;font-weight:700;display:flex;align-items:center;gap:var(--sp-2)}
.modal-close{background:none;border:none;color:var(--dim);cursor:pointer;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  transition:all .2s var(--ease-out);-webkit-tap-highlight-color:transparent}
.modal-close:hover{background:var(--red-dim);color:var(--red-g)}
.modal-close:focus-visible{outline:2px solid var(--teal-g);outline-offset:2px}
.weekly-table{width:100%;border-collapse:collapse;font-size:.82em}
.weekly-table th{color:var(--dim);font-weight:600;padding:var(--sp-2) var(--sp-1);text-align:center;
  border-bottom:1px solid var(--border);white-space:nowrap}
.weekly-table td{padding:var(--sp-2) var(--sp-1);text-align:center;font-variant-numeric:tabular-nums;direction:ltr;
  border-bottom:1px solid var(--border)}
.weekly-table tr.today{background:var(--teal-dim)}
.weekly-table tr.today td{font-weight:700;color:var(--teal-g)}

/* ─── أزرار أسفل المزامنة ─── */
.sync-actions{display:flex;gap:var(--sp-2);margin-top:var(--sp-2);flex-wrap:wrap;justify-content:center}

/* ─── طباعة ─── */
@media print{
  body{background:#fff!important;color:#000!important}
  .islamic-bg,.radial-glow,.dynamic-bg,.sync-dot,.offline-banner,.toast-container,
  .header-left,.sync-section,.dhikr-nav,.ctrl-btn,.footer,.modal-overlay{display:none!important}
  .dashboard{padding:0;max-width:100%}
  .prayer-card,.info-card,.next-card,.quran-banner,.nahy-card,.sn-card,.dhikr-card,.hadith-card{
    background:#fff!important;border:1px solid #ddd!important;color:#000!important;
    box-shadow:none!important;animation:none!important}
  .prayer-card .p-val,.prayer-card .p-name,.next-prayer-name,.clock-display,
  .i-val,.quran-text,.dhikr-text,.h-text{color:#000!important;-webkit-text-fill-color:#000!important;
    background:none!important}
}