*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16.5px;max-width:100vw}
@media(min-width:901px){html{scrollbar-gutter:stable}}
body{font-family:var(--fs);background:var(--bg);color:var(--tx);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
::selection{background:var(--gold-p);color:var(--grn-d)}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:6px}
html{scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
a{color:var(--grn);text-decoration:none}
a:hover{text-decoration:underline}
.skip{position:absolute;top:-200%;left:50%;transform:translateX(-50%);background:var(--grn);color:#fff;padding:14px 30px;border-radius:0 0 10px 10px;z-index:9999;font-weight:600;text-decoration:none;transition:top .3s}
.skip:focus{top:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
#prog{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--grn),var(--gold));z-index:2000;width:0;transition:width .12s}
#prog-pct{display:none}
.wrap{display:grid;grid-template-columns:260px 1fr;gap:0;flex-grow:1;padding:0 16px}
@media(max-width:900px){.wrap{grid-template-columns:1fr;padding:0}}
aside:hover{scrollbar-color:var(--grn-l) transparent}
aside::-webkit-scrollbar{width:4px}
aside::-webkit-scrollbar-track{background:transparent}
aside::-webkit-scrollbar-thumb{background:rgba(26,107,60,.15);border-radius:4px}
aside:hover::-webkit-scrollbar-thumb{background:var(--grn-l)}
.side-hdr{padding:8px var(--sp-2) 0;border-bottom:1px solid var(--bdr2);text-align:center;overflow:hidden}
@media(min-width:901px){.side-hdr{display:none}}
.side-hdr p{font-family:var(--ff);font-size:.9rem;color:var(--grn-d);letter-spacing:.5px;margin-top:5px;margin-bottom:var(--sp-2);font-weight:600;position:relative;z-index:1}
.toc{list-style:none;padding-bottom:var(--sp-4)}
.toc .ch:hover{border-color:var(--grn-l)}
.toc .ch-toggle{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--tx3);transition:transform .2s}
.toc .ch.open .ch-toggle{transform:rotate(180deg)}
.toc .ch-content{max-height:0;overflow:hidden;transition:max-height .3s ease}
.toc a:hover{color:var(--grn);background:rgba(26,107,60,.04)}
.toc a.active{color:var(--grn);border-left-color:var(--gold);font-weight:600;background:var(--gold-p);border-left-width:3px}
.side-close{display:none;position:absolute;top:12px;right:12px;width:36px;height:36px;background:var(--bg);border:1px solid var(--bdr2);border-radius:10px;cursor:pointer;color:var(--tx2);transition:all .2s;align-items:center;justify-content:center;z-index:10}
.side-close svg{width:18px;height:18px}
.side-close:hover{background:#fee;color:#c33;border-color:#eaa}
@media(max-width:900px){.side-close{display:inline-flex}}
.mob-dates{display:none}
.mob-prayers{display:none}
.mob-cd{display:none}
.mob-approx{display:none}
.mob-nav{display:none;z-index:1000;background:linear-gradient(160deg,#0a2818 0%,#0d4528 40%,#0a3a1e 100%);border-bottom:1px solid rgba(212,168,67,.2);flex-direction:column}
.mob-title{display:none}
.mob-title-block{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 0}
.mob-main-title{font-family:'Cairo','Cinzel',Georgia,serif;font-size:1.1rem;font-weight:700;margin:0;line-height:1.3;letter-spacing:0px;background:linear-gradient(135deg,#fdf0b0 0%,#e8c84a 30%,#d4a843 50%,#fdf0b0 70%,#e8c84a 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 6px rgba(212,168,67,.4));animation:shimmer 2.5s linear infinite}
@keyframes shimmer{to{background-position:200% center}}
.mob-title-subtitle{font-family:'Amiri',var(--ff);font-size:.8rem;font-weight:400;color:rgba(255,255,255,.85);margin:10px 0 0;line-height:1.6;letter-spacing:.3px}
.mob-title-en{font-family:'Georgia','Times New Roman',serif;font-size:.7rem;color:rgba(212,168,67,.7);font-style:italic;letter-spacing:.5px}
.mob-nav-row0{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px var(--sp-2) 14px;position:relative}
.mob-subtitle{font-family:var(--ff);font-size:.9rem;color:var(--grn-d);font-weight:600;margin-top:-45px;margin-bottom:0;letter-spacing:.5px;position:relative;z-index:1}
.mob-eyebrow{font-family:'Amiri','Playfair Display',Georgia,serif;font-size:.7rem;color:rgba(212,168,67,.7);margin:0 0 6px;line-height:1.4;letter-spacing:1px;font-style:italic;text-align:center}
.mob-title-row{display:flex;align-items:center;gap:10px;justify-content:center}
.mob-flank{width:50px;height:1px;background:linear-gradient(90deg,transparent,rgba(212,168,67,.5),transparent);flex-shrink:0;transform:translateY(2px)}
.mob-logo{height:140px;width:auto;filter:drop-shadow(0 0 2px rgba(20,60,20,.7)) drop-shadow(0 0 6px rgba(20,60,20,.5)) drop-shadow(0 0 12px rgba(20,60,20,.3)) drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.mob-nav-row1{display:flex;align-items:stretch;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2) var(--sp-1);flex-wrap:wrap}
.mob-nav-row1b{display:flex;align-items:stretch;gap:var(--sp-1);padding:0 var(--sp-2) var(--sp-1);flex-wrap:wrap}
.mob-nav-row1b .mob-quran-banner{flex:1 1 calc(50% - 4px);min-width:0}
.mob-nav-row2{display:flex;align-items:center;justify-content:center;gap:4px;padding:4px var(--sp-2) 6px;border-top:1px solid rgba(255,255,255,.08)}
.mob-nav-btn{width:50px;height:50px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--sp-1);cursor:pointer;color:#fff;transition:all .2s;flex-shrink:0}
.mob-nav-btn svg{width:20px;height:20px}
.mob-nav-btn:hover{background:rgba(212,168,67,.15);border-color:rgba(212,168,67,.35);box-shadow:0 0 12px rgba(212,168,67,.2);color:#fff}
.mob-quran-banner{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:8px 14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:var(--sp-1);color:#fff;text-decoration:none;transition:all .3s;white-space:nowrap}
.mob-quran-banner .mqb-icon{width:32px;height:32px;background:rgba(212,168,67,.2);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mob-quran-banner .mqb-icon svg{width:18px;height:18px;stroke:#fff}
.mob-quran-banner .mqb-text{display:flex;flex-direction:column;flex:1;line-height:1.15;min-width:0;overflow:hidden}
.mob-quran-banner .mqb-title{font-family:var(--ff);font-size:.8rem;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mob-quran-banner .mqb-sub{font-size:.55rem;color:rgba(255,255,255,.6);padding-top:3px}
.mob-quran-banner .mqb-chevron{margin-left:auto;opacity:.7}
.mob-quran-banner .mqb-chevron svg{width:14px;height:14px}
.mob-quran-banner:hover{background:rgba(212,168,67,.2);border-color:rgba(212,168,67,.4);box-shadow:0 0 12px rgba(212,168,67,.3)}
.mob-quran-banner:active{transform:scale(.98)}
.mob-quran-banner.current{pointer-events:none;border-color:transparent;position:relative;overflow:visible}
.mob-quran-banner.current>*{opacity:.45}
.mob-quran-banner.current::after{content:'';position:absolute;right:0;top:0;width:3px;height:100%;background:linear-gradient(135deg,#fdf0b0 0%,#e8c84a 15%,#fdf0b0 30%,#d4a843 50%,#fdf0b0 70%,#e8c84a 85%,#fdf0b0 100%);background-size:200% 200%;animation:shineMove 4s ease-in-out infinite;border-radius:0 var(--sp-1) var(--sp-1) 0}
html:not([dir="rtl"]) .mob-quran-banner.current::after{right:auto;left:0;border-radius:var(--sp-1) 0 0 var(--sp-1)}
.mob-tools{display:flex;gap:4px}
.mob-tool{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--sp-1);cursor:pointer;color:rgba(255,255,255,.6);transition:all .2s}
.mob-tool:hover,.mob-tool:active{background:rgba(255,255,255,.1);color:#d4a843}
.mob-tool.active{color:var(--gold)}
.mob-tool.active svg{fill:var(--gold)}
.mob-tool svg{width:15px;height:15px}
.mob-sticky-tools{display:none}
@media(max-width:900px){.mob-sticky-tools{display:flex;align-items:center;justify-content:center;gap:4px;padding:4px var(--sp-2) 6px;position:sticky;top:0;z-index:1001;background:linear-gradient(160deg,#0a2818 0%,#0d4528 40%,#0a3a1e 100%);border-bottom:1px solid rgba(212,168,67,.2);transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .3s ease,opacity .3s ease}.mob-sticky-tools.visible{transform:translateY(0);opacity:1;pointer-events:auto}}
body.dark .mob-sticky-tools{background:rgba(10,21,10,.95);border-bottom:1px solid rgba(255,215,0,.2)}
.mob-sticky-tools .mob-tool{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--sp-1);cursor:pointer;color:rgba(255,255,255,.6);transition:all .2s}
.mob-sticky-tools .mob-tool:hover,.mob-sticky-tools .mob-tool:active{background:rgba(255,255,255,.1);color:#d4a843}
.mob-sticky-tools .mob-tool.active{color:var(--gold)}
.mob-sticky-tools .mob-tool.active svg{fill:var(--gold)}
.mob-sticky-tools .mob-tool svg{width:15px;height:15px}
.mob-sticky-side{margin-inline-end:auto}
.mob-sticky-lang{margin-inline-start:auto}
.mob-nav-a11y{display:flex;gap:4px}
.mob-nav-a11y .a11y-btn{width:38px;height:38px;border-radius:var(--sp-1);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.6)}
.mob-nav-a11y .a11y-btn:hover,.mob-nav-a11y .a11y-btn:active{background:rgba(255,255,255,.2);color:#d4a843}
.mob-nav-a11y .a11y-btn svg{width:16px;height:16px}
.mob-lang-btn{height:50px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:5px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:var(--sp-1);cursor:pointer;color:#fff;font-size:.75rem;font-weight:600;font-family:system-ui,sans-serif;flex-shrink:0;transition:all .2s;white-space:nowrap}
.mob-lang-btn svg{width:18px;height:18px;padding:5px;background:rgba(212,168,67,.2);border-radius:6px;box-sizing:content-box;flex-shrink:0}
.mob-lang-btn:hover{background:rgba(212,168,67,.15);border-color:rgba(212,168,67,.35);box-shadow:0 0 12px rgba(212,168,67,.2)}
@media(max-width:900px){.mob-nav{display:flex}
.mob-top-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding:4px var(--sp-2) 0}
.mob-dates{display:flex;align-items:center;gap:5px;z-index:2;font-size:.75rem;padding:2px 0}
.mob-dates .hbt-hijri-block,.mob-dates .hbt-greg-block{display:flex;align-items:center;gap:3px}
.mob-dates .hbt-day,.mob-dates .hbt-date{font-family:'Amiri',var(--ff);font-size:.75rem;color:rgba(255,255,255,.6)}
.mob-dates .hbt-divider{width:1px;height:10px;background:rgba(255,255,255,.2);flex-shrink:0}
.mob-prayers{display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:center;width:auto;margin:0 var(--sp-2) var(--sp-1);border-radius:var(--sp-1);overflow-x:auto;overflow-y:hidden;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08)}
.mob-prayers .hbt-prayer{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;padding:3px 4px;border-right:1px solid rgba(255,255,255,.15);white-space:nowrap}
.mob-prayers .hbt-prayer:first-child{border-right:none}
.mob-prayers .hbt-prayer .hp-name{font-size:.8rem;font-weight:700;color:rgba(255,255,255,.7)}
.mob-prayers .hbt-prayer .hp-time{font-size:.8rem;font-family:'SF Mono','Consolas',monospace;color:#fff;font-weight:600}
.mob-prayers .hbt-prayer.next{background:linear-gradient(135deg,#d4a843,#e6c34d);box-shadow:0 2px 8px rgba(212,168,67,.4)}
.mob-prayers .hbt-prayer.next .hp-name{color:#062e15;font-weight:400}
.mob-prayers .hbt-prayer.next .hp-time{color:#062e15;font-weight:800}
.mob-prayers .hbt-prayer.passed{opacity:.35}
.mob-location .loc-mosque{vertical-align:middle;top:-2px}
.mob-location .loc-mosque path:first-child{fill:#d4a843}
.mob-location .loc-mosque rect:first-of-type{fill:#d4a843}
.mob-location .loc-mosque path:nth-child(3){fill:#d4a843}
.mob-location .loc-mosque circle:nth-of-type(2){fill:#d4a843}
.mob-location .loc-mosque line{stroke:#d4a843}
.mob-location{display:flex;align-items:center;gap:4px;font-size:.75rem;color:rgba(255,255,255,.6);padding:0}
.mob-location a{color:#d4a843;text-decoration:none}
.mob-cd{display:block;text-align:center;margin:0 var(--sp-2) var(--sp-1);padding:6px 8px 4px;background:rgba(26,107,60,.1);border:1px solid rgba(212,168,67,.15);border-radius:var(--sp-1);opacity:0;transform:translateY(6px) scale(.97);transition:opacity .4s ease,transform .4s ease}
.mob-cd.cd-ready{opacity:1;transform:translateY(0) scale(1)}
.cd-main-row{display:flex;align-items:center;justify-content:center;gap:4px 8px;flex-wrap:wrap}
.cd-text-before,.cd-text-after{font-size:12px;font-weight:600;color:#d4a843;line-height:1.3;text-align:center;flex-basis:100%;order:0}
.cd-text-before{order:-1}
.cd-text-after{order:1}
.flip-clock{order:0}
.cd-highlight{color:#fff;font-weight:700}
.cd-prayer-name{color:#fff;font-weight:700}
.flip-clock{display:flex;align-items:center;justify-content:center;gap:4px;flex-shrink:0}
.flip-group{display:flex;flex-direction:column;align-items:center;gap:2px}
.flip-card{position:relative;width:36px;height:40px;perspective:200px}
.flip-card-inner{position:relative;width:100%;height:100%;border-radius:6px;overflow:hidden;background:#071a0e;box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(212,168,67,.08)}
.flip-card-inner::after{content:'';position:absolute;inset:0;border-radius:6px;border:1px solid rgba(212,168,67,.12);pointer-events:none;z-index:3}
.flip-card-inner::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(0,0,0,.6);z-index:3}
.flip-top{position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,#0d3520,#0a2818);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;border-bottom:1px solid rgba(0,0,0,.5)}
.flip-top span{font-size:22px;font-weight:800;color:#fdf0b0;font-family:'SF Mono','Consolas','Courier New',monospace;transform:translateY(55%);line-height:1}
.flip-bottom{position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(180deg,#082010,#0d3520);display:flex;align-items:flex-start;justify-content:center;overflow:hidden}
.flip-bottom span{font-size:22px;font-weight:800;color:#e8dfc0;font-family:'SF Mono','Consolas','Courier New',monospace;transform:translateY(-45%);line-height:1}
.flip-overlay-top,.flip-overlay-bottom{position:absolute;left:0;right:0;height:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;backface-visibility:hidden}
.flip-overlay-top{top:0;background:linear-gradient(180deg,#0d3520,#0a2818);border-bottom:1px solid rgba(0,0,0,.5);border-radius:6px 6px 0 0;z-index:2;transform-origin:bottom center}
.flip-overlay-top span{font-size:22px;font-weight:800;color:#fdf0b0;font-family:'SF Mono','Consolas','Courier New',monospace;transform:translateY(55%);line-height:1}
.flip-overlay-bottom{bottom:0;background:linear-gradient(180deg,#082010,#0d3520);border-radius:0 0 6px 6px;transform-origin:top center;transform:rotateX(90deg);z-index:2}
.flip-overlay-bottom span{font-size:22px;font-weight:800;color:#e8dfc0;font-family:'SF Mono','Consolas','Courier New',monospace;transform:translateY(-45%);line-height:1}
.flip-card.flipping .flip-overlay-top{animation:flipDown .5s ease-in forwards}
.flip-card.flipping .flip-overlay-bottom{animation:flipUp .5s .25s ease-out forwards}
@keyframes flipDown{0%{transform:rotateX(0deg)}100%{transform:rotateX(-90deg)}}
@keyframes flipUp{0%{transform:rotateX(90deg)}100%{transform:rotateX(0deg)}}
.flip-unit-label{font-size:8px;font-weight:600;color:rgba(212,168,67,.45);letter-spacing:.5px}
.flip-sep{font-size:20px;font-weight:800;color:#d4a843;margin:0 2px;align-self:center;padding-bottom:14px;animation:flipBlink 1s ease-in-out infinite}
@keyframes flipBlink{0%,100%{opacity:1}50%{opacity:.3}}
.cd-location{font-size:9.5px;color:rgba(255,255,255,.45);margin-top:4px;line-height:1.3;display:none}
.cd-location .cd-city{color:#d4a843;font-weight:600}
.cd-time-wrap{color:#fff;-webkit-text-fill-color:#fff;margin:0 3px}
.cd-digits{font-family:'SF Mono','Consolas',monospace;font-weight:800;color:#fff !important;font-size:.95em;margin:0 4px;-webkit-text-fill-color:#fff}
.mob-approx{display:block;text-align:center;margin:0 var(--sp-2) var(--sp-1);font-size:.8rem;color:rgba(255,255,255,.5)}
.mob-approx:empty{display:none}
.mob-approx a{color:#d4a843;text-decoration:underline}
}
@media(max-width:480px){
.mob-prayers .hbt-prayer{gap:2px;padding:3px 2px}
.mob-prayers .hbt-prayer .hp-name{font-size:.65rem}
.mob-prayers .hbt-prayer .hp-time{font-size:.65rem}
.mob-cd{padding:5px 4px 3px}
.cd-text-before,.cd-text-after{font-size:11px}
.cd-main-row{gap:4px}
.flip-card{width:30px;height:34px}
.flip-top span,.flip-bottom span,.flip-overlay-top span,.flip-overlay-bottom span{font-size:18px}
.flip-sep{font-size:16px;padding-bottom:12px}
}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:4999}
.overlay.show{display:block}
.compact-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 16px;background:#fff;border-bottom:1px solid #e4e4e7;border-radius:0 0 12px 12px;margin:0;box-shadow:0 4px 16px rgba(0,0,0,.08);height:auto;z-index:91;position:relative;grid-column:1/-1}
.cb-title{display:flex;align-items:center;gap:12px;min-width:0;width:100%;flex-wrap:wrap;justify-content:center}
.compact-bar .hbt-hijri-block,.compact-bar .hbt-greg-block{display:flex;flex-direction:row;gap:8px;align-items:center;line-height:1}
.compact-bar .hbt-greg-block{direction:ltr}
.compact-bar .hbt-hijri-block .hbt-day,.compact-bar .hbt-greg-block .hbt-day{font-family:'Amiri',var(--ff);font-size:.75rem}
.compact-bar .hbt-hijri-block .hbt-date,.compact-bar .hbt-greg-block .hbt-date{font-family:'Amiri',var(--ff);font-size:.75rem}
.compact-bar .hbt-day{font-weight:700;color:#0e4326;white-space:nowrap}
.compact-bar .hbt-date{color:#5a5a5a;white-space:nowrap}
.compact-bar .hbt-divider{width:1px;height:16px;background:#e4e4e7;flex-shrink:0}
.compact-bar .hbt-prayers{display:flex;align-items:center;gap:8px;min-width:0;flex-direction:row;justify-content:center}
.compact-bar .hp-header{display:flex;align-items:center;gap:8px;margin-right:0}
.compact-bar .hp-title{font-size:.75rem}
.compact-bar .hp-city{display:none}
.compact-bar .hp-list{display:flex;align-items:stretch;flex-wrap:nowrap;border:1px solid #e4e4e7;border-radius:6px;overflow:hidden}
.compact-bar .hbt-prayer{display:flex;align-items:center;gap:8px;padding:3px 8px;line-height:1;flex-direction:row;border-right:1px solid #e4e4e7}
.compact-bar .hbt-prayer:last-child{border-right:none}
.compact-bar .hbt-prayer.next{background:#1a6b3c;border-color:#1a6b3c}
.compact-bar .hbt-prayer .hp-name{font-size:.75rem;font-weight:700;color:#999;letter-spacing:.3px}
.compact-bar .hbt-prayer.next .hp-name{color:#fff}
.compact-bar .hbt-prayer .hp-time{font-family:'Consolas',monospace;font-size:.75rem;color:#5a5a5a;font-weight:600}
.compact-bar .hbt-prayer.next .hp-time{color:#fff;font-weight:700}
.compact-bar .hbt-prayer.passed{opacity:.35}
.compact-bar .hp-cd-label{display:none}
.compact-bar .hp-cd-bold{display:block;font-size:12.5px;font-weight:700;white-space:nowrap}
.compact-bar .hp-cd-bold .cd-static{color:var(--tx2);font-weight:600}
.compact-bar .hp-cd-bold .cd-time-wrap{color:#8B6914;-webkit-text-fill-color:#8B6914;font-weight:800}
.compact-bar .hp-cd-bold .cd-time-wrap .cd-digits{color:#8B6914;-webkit-text-fill-color:#8B6914}
.compact-bar .hp-countdown{display:none}
.loc-mosque{display:inline-block;vertical-align:text-bottom;margin-inline-end:3px;flex-shrink:0;position:relative;top:-1px}
.compact-bar .hp-location{font-size:.75rem;color:#5a5a5a;white-space:nowrap;margin-top:0}
.compact-bar .hp-location{margin-inline-start:auto}
.compact-bar .hp-location a{color:#0e4326;text-decoration:none}
.compact-bar .hp-location a:hover{text-decoration:underline}
.compact-bar .hp-approx-inline{color:var(--tx3)}
.compact-bar .hp-approx-inline a{color:var(--grn);background:rgba(22,101,52,.08);border-color:rgba(22,101,52,.2);font-size:.65rem}
.compact-bar .hp-approx-inline a:hover{background:rgba(22,101,52,.15);box-shadow:none}
html:not([lang="ar"]) .cb-title{flex-wrap:nowrap;gap:8px}
html:not([lang="ar"]) .compact-bar .hbt-hijri-block .hbt-day,html:not([lang="ar"]) .compact-bar .hbt-greg-block .hbt-day,html:not([lang="ar"]) .compact-bar .hbt-hijri-block .hbt-date,html:not([lang="ar"]) .compact-bar .hbt-greg-block .hbt-date{font-size:.65rem}
html:not([lang="ar"]) .compact-bar .hp-title{font-size:.65rem}
html:not([lang="ar"]) .compact-bar .hbt-prayer .hp-name{font-size:.65rem}
html:not([lang="ar"]) .compact-bar .hbt-prayer .hp-time{font-size:.65rem}
html:not([lang="ar"]) .compact-bar .hp-cd-bold{overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:11px}
html:not([lang="ar"]) .compact-bar .hbt-prayers{min-width:0;flex-shrink:1;overflow:hidden;gap:4px}
html:not([lang="ar"]) .compact-bar .hp-location{overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:.65rem}
@media(max-width:900px){
.compact-bar{display:none}
.compact-bar .cb-title{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;width:100%}
.compact-bar .hbt-hijri-block .hbt-day,.compact-bar .hbt-greg-block .hbt-day{font-size:.85rem}
.compact-bar .hbt-hijri-block .hbt-date,.compact-bar .hbt-greg-block .hbt-date{font-size:.85rem}
.compact-bar .hbt-hijri-block,.compact-bar .hbt-greg-block{justify-content:center}
.compact-bar .hbt-divider{display:inline;font-size:.85rem}
.compact-bar .hbt-div-after-prayers,.compact-bar .hbt-div-before-prayers{display:none}
.compact-bar .hbt-prayers{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;width:100%;gap:6px}
.compact-bar .hp-header{display:none}
.compact-bar .hp-list{display:none}
.compact-bar .hbt-prayer{flex:1;justify-content:center;padding:4px 6px}
.compact-bar .hbt-prayer .hp-name{font-size:.85rem}
.compact-bar .hbt-prayer .hp-time{font-size:.85rem}
.compact-bar .hp-cd-label{display:none}
.compact-bar .hp-countdown{display:none}
.compact-bar .hp-cd-bold{display:none}
.compact-bar .hp-location{display:none}
.hp-approx{display:none}
.compact-bar .hbt-hijri-block,.compact-bar .hbt-greg-block,.compact-bar .cb-title>.hbt-divider:not(.hbt-div-before-prayers):not(.hbt-div-after-prayers){display:none}
.hero-dates-mobile{display:none}
}
/* === HEADER === */
.header-wrap{grid-column:1/-1}
.mini-header{display:none;position:fixed;top:0;left:0;right:0;z-index:92;transform:translateY(-100%);transition:transform .3s ease;pointer-events:none;background:linear-gradient(160deg,#0c3520,#0f5530);box-shadow:0 2px 16px rgba(0,0,0,.25);align-items:center;justify-content:center;padding:6px 16px;gap:8px;flex-wrap:wrap}
@media(min-width:901px){.mini-header{display:flex}}
.mini-header.show{transform:translateY(0);pointer-events:auto}
@media(min-width:901px){body.mini-on aside{top:46px}}
@media(max-width:900px){.mini-header{display:none!important}}
.hero-dates-mobile{display:none}
.hero-bar{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 24px 16px;background:linear-gradient(160deg,#0a2818,#0d4528);border:none;border-radius:16px 16px 0 0;margin:12px 0 0;position:relative;z-index:90;grid-column:1/-1;box-shadow:0 8px 32px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.2)}
.hero-bar::before{content:none}
.hero-bar::after{content:none}
.hero-title-block{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.hero-toolbar{display:flex;align-items:center;justify-content:center;padding:6px 16px;background:linear-gradient(160deg,#0c3520,#0f5530);grid-column:1/-1;gap:8px;flex-wrap:wrap}
.hero-bar .hero-lang-btn{position:absolute;top:10px;right:16px;z-index:2}
html:not([dir="rtl"]) .hero-bar .hero-lang-btn{right:auto;left:16px}
.hero-main-title{font-family:'Cairo','Cinzel',Georgia,serif;font-size:2.4rem;font-weight:700;margin:0;line-height:1.2;background:linear-gradient(135deg,#fdf0b0 0%,#e8c84a 15%,#fdf0b0 30%,#d4a843 50%,#fdf0b0 70%,#e8c84a 85%,#fdf0b0 100%);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3));animation:shineMove 4s ease-in-out infinite}
.hero-subtitle{font-family:'Amiri',serif;font-size:.82rem;color:rgba(212,168,67,.6);margin:0 0 6px;line-height:1.4;letter-spacing:1px;font-style:italic;text-transform:none}
.hero-subtitle-en{font-family:var(--fs);font-size:.8rem;color:var(--tx3);font-style:italic}
.hero-title-row{display:flex;align-items:center;gap:12px}
.hero-flank{width:60px;height:1px;background:linear-gradient(90deg,transparent,rgba(212,168,67,.4),transparent);flex-shrink:0}
.hero-a11y{display:flex;align-items:center;gap:6px;position:absolute;top:10px;left:16px;z-index:1}
.ha-btn{background:none;border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:3px 10px;font-size:.7rem;font-weight:600;color:rgba(255,255,255,.5);cursor:pointer;transition:all .2s;font-family:system-ui,sans-serif;letter-spacing:.3px}
.ha-btn:hover{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08)}
.ha-btn.active{color:#d4a843;border-color:rgba(212,168,67,.4);background:rgba(212,168,67,.08)}
.ha-sep{width:1px;height:14px;background:rgba(255,255,255,.15)}
body.dark .ha-btn{color:rgba(255,215,0,.35);border-color:rgba(255,215,0,.12)}
body.dark .ha-btn:hover{color:#FFD700;border-color:rgba(255,215,0,.3);background:rgba(255,215,0,.06)}
body.dark .ha-btn.active{color:#FFD700;border-color:rgba(255,215,0,.4);background:rgba(255,215,0,.08)}
body.dark .ha-sep{background:rgba(255,215,0,.15)}
.hero-pages{display:flex;align-items:stretch;border:1px solid rgba(255,255,255,.15);border-radius:6px;overflow:hidden;position:relative;margin:10px auto 0;z-index:1}
.hp-link:last-child{border-right:none}
.hp-link.active{color:#e8c84a;background:rgba(212,168,67,.12);border-right-color:rgba(212,168,67,.3);box-shadow:inset 0 -2px 0 #d4a843,inset 0 2px 0 #d4a843,0 0 12px rgba(212,168,67,.15)}
body.dark .hero-pages{border-color:rgba(255,215,0,.12)}
body.dark .hp-link{color:rgba(255,215,0,.35);border-color:rgba(255,215,0,.12)}
body.dark .hp-link.active{color:#FFD700;background:rgba(255,215,0,.1);box-shadow:inset 0 -2px 0 #FFD700,inset 0 2px 0 #FFD700,0 0 12px rgba(255,215,0,.15)}
.hp-approx{display:none}
.hp-location{font-size:.8rem;color:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;margin-top:6px}
.hp-location a{color:#d4a843;text-decoration:none}
.hp-approx-inline{font-size:.65rem;color:rgba(255,255,255,.5);margin-inline-start:4px;display:inline-flex;align-items:center;gap:3px}
.hp-approx-inline a{color:#d4a843;text-decoration:none;background:rgba(212,168,67,.12);padding:1px 8px;border-radius:10px;border:1px solid rgba(212,168,67,.25);font-size:.6rem;transition:all .2s}
.hp-approx-inline a:hover{background:rgba(212,168,67,.25);box-shadow:0 0 8px rgba(212,168,67,.2)}
.site-logo{display:inline-block}.site-logo .logo-dark{display:none}
body.dark .site-logo .logo-light{display:none}
body.dark .site-logo .logo-dark{display:inline}
.hero-brand{margin-bottom:8px}.hero-brand img{height:44px;width:auto;display:block}
.side-logo{text-align:center;margin-bottom:-6px}.side-logo img{height:48px;width:auto}
.side-hdr .side-title{font-family:'Amiri',Georgia,serif;font-size:.8rem;font-weight:400;color:#8a6d2b !important;margin:-8px 0 6px;letter-spacing:1.5px;text-transform:uppercase;opacity:1}
body.dark .side-hdr .side-title{color:#FFD700 !important;opacity:.7}
.hero-quran-btn{display:flex;align-items:center;gap:8px;padding:6px 10px;background:rgba(255,255,255,.08);border:1px solid rgba(212,168,67,.2);border-radius:10px;color:#fff;text-decoration:none;transition:all .3s;font-size:.8rem;flex-shrink:1;min-width:0}
.hero-quran-btn:hover{background:rgba(212,168,67,.12);border-color:rgba(212,168,67,.5);box-shadow:0 0 12px rgba(212,168,67,.2);text-decoration:none}
.hero-quran-btn.current{pointer-events:none;border-color:transparent;position:relative;overflow:visible}
.hero-quran-btn.current>*{opacity:.45}
.hero-quran-btn.current::after{content:'';position:absolute;right:0;top:0;width:3px;height:100%;background:linear-gradient(135deg,#fdf0b0 0%,#e8c84a 15%,#fdf0b0 30%,#d4a843 50%,#fdf0b0 70%,#e8c84a 85%,#fdf0b0 100%);background-size:200% 200%;animation:shineMove 4s ease-in-out infinite}
html:not([dir="rtl"]) .hero-quran-btn.current::after{right:auto;left:0}
.hero-quran-btn .hq-icon{width:28px;height:28px;background:rgba(212,168,67,.25);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero-quran-btn .hq-icon svg{stroke:#fff}
.hero-quran-btn .hq-text{display:flex;flex-direction:column;line-height:1.15}
.hero-quran-btn .hq-text{min-width:0;overflow:hidden}
.hero-quran-btn .hq-title{font-family:Georgia,serif;font-size:.75rem;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-quran-btn .hq-sub{font-size:.52rem;color:rgba(255,255,255,.5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-top:3px}
.hero-quran-btn .hq-chevron{opacity:.7;flex-shrink:0}
.hero-quran-btn.hq-hidden{opacity:0;transform:scale(.7) translateY(10px);pointer-events:none}
.hero-lang-btn{padding:6px 10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(212,168,67,.2);border-radius:10px;cursor:pointer;color:#fff;font-size:.75rem;font-weight:600;font-family:system-ui,sans-serif;flex-shrink:1;transition:all .2s;min-width:0}
.hero-lang-btn svg{width:18px;height:18px;padding:5px;background:rgba(212,168,67,.25);border-radius:6px;box-sizing:content-box}
.hero-lang-btn:hover{background:rgba(212,168,67,.12);border-color:rgba(212,168,67,.5);color:#e8d080;box-shadow:0 0 12px rgba(212,168,67,.2)}
@media(max-width:900px){.hero-bar,.hero-toolbar{display:none}.mob-logo{height:220px;margin-top:-20px}.hero-a11y{display:none}}
footer{background:linear-gradient(180deg,var(--bg),var(--wh));border-top:1px solid var(--bdr);text-align:center;padding:var(--sp-3) var(--sp-3) 90px;position:relative;z-index:81}
footer .ft-title{font-family:var(--ff);font-size:.9rem;color:var(--grn-d);font-weight:700;margin-bottom:var(--sp-1);display:flex;align-items:center;justify-content:center;gap:6px}
footer .ft-logo{width:22px;height:22px;border-radius:5px}
footer .ft-logo.logo-light{display:none}
body.dark footer .ft-logo.logo-light{display:inline}
body.dark footer .ft-logo.logo-dark{display:none}
footer .ft-line{width:var(--sp-4);height:1px;background:linear-gradient(90deg,var(--grn),var(--gold));border-radius:0;margin:0 auto var(--sp-1)}
footer p{color:var(--tx3);font-size:.75rem;margin-bottom:2px;line-height:1.4}
footer .ft-dua{font-family:'Amiri','Noto Naskh Arabic',serif;font-size:.88rem;line-height:1.7;color:var(--grn-d);direction:rtl;max-width:600px;margin:0 auto var(--sp-1)}
footer .ft-sep{width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--bdr2),transparent);margin:var(--sp-1) auto}
footer .ft-copy{font-size:.65rem;color:var(--tx3);opacity:.7;margin-top:2px}
footer .ft-presented{font-size:.7rem;color:var(--tx3);margin-top:2px}
.btt{position:fixed;bottom:var(--sp-3);right:var(--sp-3);width:48px;height:48px;background:var(--wh);color:var(--grn);border:1px solid var(--bdr);border-radius:var(--sp-2);cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.08);opacity:0;visibility:hidden;transition:all .35s cubic-bezier(.4,0,.2,1);z-index:999;display:flex;align-items:center;justify-content:center}
.btt svg{width:20px;height:20px}
.btt.show{opacity:1;visibility:visible}
.side-sticky{position:sticky;top:0;background:var(--wh);z-index:10;border-bottom:1px solid var(--bdr2);margin:0 0 4px;box-shadow:0 2px 4px rgba(0,0,0,.05)}
@media(max-width:900px){.side-sticky{display:none}}
.btt:hover{background:var(--grn);color:#fff;border-color:var(--grn);transform:translateY(-2px);box-shadow:0 6px 24px rgba(26,107,60,.25)}
@media(max-width:900px){.btt{bottom:16px;right:16px;width:44px;height:44px}}
.a11y{display:flex;align-items:center;gap:4px}
.a11y-btn{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;background:var(--wh);border:1px solid var(--bdr2);border-radius:var(--sp-1);cursor:pointer;color:var(--tx2);transition:all .25s;position:relative}
.a11y-btn svg{width:18px;height:18px;pointer-events:none}
.a11y-btn:hover,.a11y-btn:focus-visible{background:var(--grn);color:#fff;border-color:var(--grn);transform:translateY(-1px);box-shadow:0 4px 12px rgba(26,107,60,.2)}
.a11y-btn.active{background:var(--grn-p);border-color:var(--grn-l);color:var(--grn)}
.a11y-btn[aria-label]::after{content:attr(aria-label);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--grn-d);color:#fff;padding:4px 10px;border-radius:6px;font-size:.68rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;font-family:var(--fs)}
@media(min-width:901px){.a11y .a11y-btn[aria-label]::after{bottom:auto;left:auto;right:calc(100% + 8px);top:50%;transform:translateY(-50%)}
html[dir="rtl"] .a11y .a11y-btn[aria-label]::after{right:auto;left:calc(100% + 8px)}}
.a11y-btn:hover::after{opacity:1}
.a11y-sep{width:1px;height:20px;background:var(--bdr2);margin:0 4px}
.a11y-pct{display:none;font-size:.75rem;font-weight:700;font-family:var(--fs);letter-spacing:-.5px;color:var(--tx2);cursor:default;margin-inline-end:auto}
.a11y-pct:hover,.a11y-pct:focus-visible{background:var(--wh);color:var(--tx2);border-color:var(--bdr2);transform:none;box-shadow:none}
@media(min-width:901px){#btt-a11y{display:inline-flex}.btt{display:none!important}}
body.dark .btt{color:var(--gold);border-color:rgba(255,215,0,.25);box-shadow:0 4px 20px rgba(0,0,0,.3)}
body.dark .btt:hover{background:var(--gold);color:#0f1a0f;border-color:var(--gold);box-shadow:0 0 20px rgba(255,215,0,.3)}
body.dark .search-box{border:1px solid rgba(255,215,0,.2)}
body.dark .search-modal{backdrop-filter:blur(8px)}
body.dark .lang-modal{backdrop-filter:blur(8px)}
body.dark .lang-modal-inner{border:1px solid rgba(255,215,0,.2)}
body.dark .lang-modal-inner h3{color:#FFD700}
body.dark .lang-option:hover{border-color:rgba(255,215,0,.3);background:rgba(255,215,0,.04)}
body.dark .lang-option.active{background:rgba(255,215,0,.08);color:#FFD700;border-color:#FFD700}
body.dark .lang-modal-close:hover{border-color:rgba(255,215,0,.3);color:#FFD700}
body.dark aside.open{background:linear-gradient(180deg,#0a150a,#132213,#0f1a0f)}
body.dark aside.open::after{background:linear-gradient(180deg,transparent,#FFD700,transparent);box-shadow:0 0 8px rgba(255,215,0,.3)}
body.dark aside.open .side-hdr{background:transparent;border-bottom-color:var(--bdr)}
body.dark aside.open .side-hdr p{color:#FFD700}
body.dark aside.open .toc a:hover{background:rgba(255,215,0,.04);box-shadow:inset 3px 0 0 rgba(255,215,0,.3)}
body.dark aside.open .toc a.active{color:#FFD700;border-left-color:#FFD700;background:rgba(255,215,0,.06);box-shadow:inset 3px 0 8px rgba(255,215,0,.1)}
body.dark aside.open .toc a.active .n{color:#FFD700}
body.dark footer{background:linear-gradient(180deg,var(--bg),#0a150a)}
body.dark footer .ft-line{background:linear-gradient(90deg,transparent,#FFD700,transparent);box-shadow:0 0 8px rgba(255,215,0,.2)}
body.dark footer .ft-title{color:#FFD700}
body.dark footer .ft-dua{color:#8ad4a8}
/* Qibla */
body.dark .qibla-cardinals{color:#FFD700}
body.dark .qibla-label{color:#FFD700}
body.dark .needle-qibla{fill:#5bc484 !important;opacity:1 !important}
body.dark .needle-back{fill:#ffffff !important;opacity:.3 !important}
body.dark .qibla-ring{background:radial-gradient(circle,#1a2a1a 60%,#0f1a0f);border-color:var(--grn);box-shadow:0 0 0 2px #FFD700,0 4px 12px rgba(0,0,0,.3),inset 0 0 8px rgba(91,196,132,.1)}
body.dark .compact-bar{background:#0f1a0f;border-bottom:1px solid #1a2a1a;border-radius:0 0 12px 12px;margin:0;box-shadow:0 4px 16px rgba(0,0,0,.2)}
body.dark .compact-bar .hbt-day{color:#FFD700}
body.dark .compact-bar .hbt-date{color:rgba(255,215,0,.5)}
body.dark .compact-bar .hbt-divider{background:rgba(255,215,0,.2)}
body.dark .compact-bar .hp-list{border-color:rgba(255,215,0,.2)}
body.dark .compact-bar .hbt-prayer{border-color:rgba(255,215,0,.15)}
body.dark .compact-bar .hbt-prayer .hp-name{color:rgba(255,215,0,.4)}
body.dark .compact-bar .hbt-prayer .hp-time{color:rgba(255,215,0,.6)}
body.dark .compact-bar .hbt-prayer.next{background:rgba(255,215,0,.15);border-color:rgba(255,215,0,.25)}
body.dark .compact-bar .hbt-prayer.next .hp-name{color:#FFD700}
body.dark .compact-bar .hbt-prayer.next .hp-time{color:#FFE44D}
body.dark .compact-bar .hp-cd-bold{color:#d4a843}
body.dark .compact-bar .hp-cd-bold .cd-static{color:#d4a843}
body.dark .compact-bar .hp-cd-bold .cd-time-wrap{color:#fff;-webkit-text-fill-color:#fff}
body.dark .compact-bar .hp-location a{color:#FFD700}
body.dark .compact-bar .hp-approx-inline a{color:#FFD700;background:rgba(255,215,0,.08);border-color:rgba(255,215,0,.2)}
body.dark .hero-bar{background:linear-gradient(160deg,#050e08,#081a0e);border:none;box-shadow:0 8px 32px rgba(0,0,0,.5)}
body.dark .hero-bar::before{content:none}
body.dark .hero-toolbar,body.dark .mini-header{background:linear-gradient(160deg,#071510,#0a2518)}
body.dark .hero-main-title{filter:none}
body.dark .hero-subtitle{color:rgba(255,215,0,.6);text-shadow:none}
body.dark .mob-nav{background:rgba(10,21,10,.92);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid rgba(255,215,0,.2)}
/* Reading mode */
body.dyslexia .sec p,body.dyslexia .sec li{line-height:1.8}
.toast{position:fixed;bottom:-60px;left:50%;transform:translateX(-50%);background:var(--grn-d);color:#fff;padding:12px 24px;border-radius:8px;font-size:.9rem;z-index:9999;transition:bottom .3s ease;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.toast.show{bottom:24px}
.search-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9000;display:none;align-items:flex-start;justify-content:center;padding-top:15vh}
.search-modal.open{display:flex}
.search-box{background:var(--card);border-radius:var(--r);width:90%;max-width:500px;box-shadow:var(--sh2);overflow:hidden}
.search-input{width:100%;padding:16px 20px;border:none;font-size:1.1rem;outline:none;background:transparent;color:var(--tx)}
.search-results{max-height:50vh;overflow-y:auto;border-top:1px solid var(--bdr2)}
.search-empty{padding:20px;text-align:center;color:var(--tx3)}
.bookmarks-title{font-size:.7rem;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--sp-1);display:flex;align-items:center;gap:6px}
.bookmarks-list{display:flex;flex-direction:column;gap:4px}
.bookmark-item:hover{background:var(--grn-p);text-decoration:none}
.bookmark-item .bk-num{color:var(--gold);font-weight:700;font-size:.7rem}
.bookmark-item .bk-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bookmark-remove{background:none;border:none;padding:2px;cursor:pointer;color:var(--tx3);border-radius:4px;display:flex;align-items:center;justify-content:center}
.bookmark-remove:hover{color:#c00;background:rgba(200,0,0,.1)}
.bookmark-remove svg{width:14px;height:14px}
.bookmarks-hint{font-size:.75rem;color:var(--tx3);font-style:italic}
.lang-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9500;display:none;align-items:center;justify-content:center;padding:var(--sp-3)}
.lang-modal.open{display:flex}
.lang-modal-inner{background:var(--wh);border-radius:var(--r);padding:var(--sp-4);max-width:520px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:var(--sh2)}
.lang-modal-inner h3{font-family:var(--ff);color:var(--grn-d);margin-bottom:var(--sp-3);text-align:center;font-size:1.2rem}
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--sp-1)}
.lang-option{padding:10px 12px;font-size:.8rem;border:1px solid var(--bdr);border-radius:var(--sp-1);cursor:pointer;text-align:center;transition:all .2s;background:var(--wh);color:var(--tx);font-family:var(--fs)}
.lang-option:hover{border-color:var(--grn-l);background:var(--grn-p)}
.lang-option.active{background:var(--grn);color:#fff;border-color:var(--grn)}
.lang-modal-close{display:block;margin:var(--sp-3) auto 0;padding:8px 24px;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--sp-1);cursor:pointer;font-size:.85rem;color:var(--tx2);font-family:var(--fs)}
html[dir="rtl"] aside{border-right:none;border-left:1px solid var(--bdr)}
html[dir="rtl"] .toc a{border-left:none;border-right:2px solid transparent;text-align:right}
html[dir="rtl"] .toc a.active{border-left:none;border-right-color:var(--grn)}
html:not([dir="rtl"]) .hero-a11y{left:auto;right:16px}
html[dir="ltr"] .hero-pages{direction:rtl}
html[dir="rtl"] .hero-pages{direction:ltr}
html[dir="rtl"] .btt{right:auto;left:var(--sp-3)}
html[dir="rtl"] .mini-header .hero-lang-btn{position:absolute;right:16px;top:50%;transform:translateY(-50%);margin:0}
html:not([dir="rtl"]) .mini-header .hero-lang-btn{position:absolute;left:16px;top:50%;transform:translateY(-50%);margin:0}
.mini-header .mini-a11y{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:4px}
html[dir="rtl"] .mini-header .mini-a11y{left:16px;right:auto}
html:not([dir="rtl"]) .mini-header .mini-a11y{right:16px;left:auto}
.mini-header .mini-a11y .ha-btn{padding:3px 6px;font-size:.65rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:4px;color:rgba(255,255,255,.7);cursor:pointer;transition:all .2s}
.mini-header .mini-a11y .ha-btn:hover{background:rgba(255,255,255,.15);color:#fff}
.mini-header .mini-a11y .ha-sep{width:1px;height:14px;background:rgba(255,255,255,.15)}
@keyframes shineMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.mob-nav .logo-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;padding:8px 0 20px}
.mob-nav .logo-wrap::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(212,168,67,.15) 0%,rgba(212,168,67,.05) 40%,transparent 70%);filter:blur(30px);pointer-events:none}
.mob-nav .logo-wrap .mob-main-title{font-size:2.5rem;letter-spacing:0px;background:linear-gradient(135deg,#fdf0b0 0%,#e8c84a 12%,#fdf0b0 22%,#d4a843 35%,#f7e8a0 48%,#c49b38 58%,#fdf0b0 70%,#d4a843 82%,#fdf0b0 100%);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shineMove 4s ease-in-out infinite;filter:drop-shadow(0 1px 0 #7a5a20) drop-shadow(0 2px 0 #6d4e1a) drop-shadow(0 3px 0 #604215) drop-shadow(0 4px 0 #533810) drop-shadow(0 5px 1px rgba(0,0,0,.45)) drop-shadow(0 10px 20px rgba(0,0,0,.4))}
.qibla-ring{width:100%;height:100%;border-radius:50%;border:3px solid var(--grn);background:radial-gradient(circle,#f8faf8 60%,#e8f0e8);box-shadow:0 0 0 2px #d4a843,0 4px 12px rgba(0,0,0,.1),inset 0 0 8px rgba(26,107,60,.08);position:relative;display:flex;align-items:center;justify-content:center}
.qibla-ring::before{content:'';position:absolute;inset:3px;border-radius:50%;border:1px solid rgba(26,107,60,.15)}
.qibla-cardinals{position:absolute;inset:0;font-size:.55rem;font-weight:700;color:var(--grn-d);opacity:.5}
.qibla-cardinals span{position:absolute;transform:translate(-50%,-50%)}
.qibla-cardinals .qc-n{top:12%;left:50%}
.qibla-cardinals .qc-s{top:88%;left:50%}
.qibla-cardinals .qc-e{top:50%;left:88%}
.qibla-cardinals .qc-w{top:50%;left:12%}
.qibla-needle{position:absolute;inset:0;transition:transform .3s ease-out;will-change:transform}
.qibla-kaaba{position:absolute;top:-28px;left:50%;transform:translateX(-50%);font-size:16px;z-index:3;line-height:1}
.qibla-needle svg{width:100%;height:100%}
.needle-qibla{fill:#1a6b3c;opacity:.9}
.needle-back{fill:#b8892e;opacity:.5}
.qibla-center{position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:linear-gradient(135deg,#fdf0b0,#d4a843);box-shadow:0 1px 4px rgba(0,0,0,.2);z-index:2}
.qibla-center::after{content:'🕋';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:8px;line-height:1}
.qibla-label .qibla-deg{font-variant-numeric:tabular-nums;font-size:.75rem;opacity:.7}
@keyframes qiblaPulse{0%,100%{filter:drop-shadow(0 0 2px rgba(26,107,60,.3))}50%{filter:drop-shadow(0 0 6px rgba(26,107,60,.6))}}
.qibla-needle.live{animation:qiblaPulse 2s ease-in-out infinite}
@media(max-width:900px){
.qibla-ring{background:radial-gradient(circle,#1a2a1a 60%,#0f1a0f);border-color:var(--grn);box-shadow:0 0 0 2px #d4a843,0 4px 12px rgba(0,0,0,.3),inset 0 0 8px rgba(91,196,132,.1)}
.qibla-ring::before{border-color:rgba(212,168,67,.15)}
.qibla-cardinals{color:#FFD700}
.qibla-label{color:#FFD700}
.needle-qibla{fill:#5bc484 !important;opacity:1 !important}
.needle-back{fill:#ffffff !important;opacity:.3 !important}
}
/* Page transition */
/* Internal navigation fade */
body.pt-fade-out{opacity:0!important;transition:opacity .2s ease-out!important}
body.pt-fade-in{animation:ptFadeIn .2s ease-in both}
@keyframes ptFadeIn{from{opacity:0}to{opacity:1}}
/* Intro overlay (external visitors) */
.intro-overlay{position:fixed;inset:0;z-index:100000;pointer-events:none;opacity:0;overflow:hidden}
.intro-overlay.playing{opacity:1;pointer-events:auto}
.intro-overlay .intro-curtain{position:absolute;left:0;right:0;height:50%;z-index:1}
.intro-overlay .intro-curtain.top{top:0;background:linear-gradient(180deg,#040f08 0%,#0a3018 70%,#0d4528 100%);transform-origin:center top}
.intro-overlay .intro-curtain.bottom{bottom:0;background:linear-gradient(0deg,#040f08 0%,#0a3018 70%,#0d4528 100%);transform-origin:center bottom}
.intro-overlay .intro-seam{position:absolute;left:0;right:0;height:2px;top:50%;transform:translateY(-50%);z-index:2;background:linear-gradient(90deg,transparent,rgba(212,168,67,.3),transparent);opacity:0}
.intro-overlay .intro-center{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.intro-overlay .intro-glow{position:absolute;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,rgba(212,168,67,.25),transparent 70%);opacity:0;transform:scale(.3)}
.intro-overlay .intro-logo{width:130px;opacity:0;transform:scale(.3);filter:drop-shadow(0 0 40px rgba(212,168,67,.5))}
.intro-overlay .intro-title{font-family:'Cinzel',Georgia,serif;font-size:1.7rem;font-weight:700;letter-spacing:.5px;background:linear-gradient(135deg,#fdf0b0 0%,#e8c84a 25%,#fdf0b0 50%,#d4a843 75%,#fdf0b0 100%);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:0;transform:translateY(16px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.intro-overlay .intro-line{width:0;height:2px;background:linear-gradient(90deg,transparent,#d4a843,transparent)}
/* Phase 1: logo zoom in */
.intro-overlay.playing .intro-glow{animation:intGlowIn 1.2s ease-out .1s forwards}
.intro-overlay.playing .intro-logo{animation:intLogoIn 1.1s cubic-bezier(.34,1.56,.64,1) .2s forwards}
.intro-overlay.playing .intro-line{animation:intLineIn .7s ease-out .9s forwards}
.intro-overlay.playing .intro-title{animation:intTitleIn .7s ease-out 1.1s forwards,ptShine 3s ease-in-out 1.6s infinite}
.intro-overlay.playing .intro-seam{animation:intSeamIn .6s ease .8s forwards}
/* Phase 2: curtains open */
.intro-overlay.open .intro-logo{animation:intLogoOut .7s ease-in forwards}
.intro-overlay.open .intro-title,.intro-overlay.open .intro-line{animation:intFadeUp .3s ease-in forwards}
.intro-overlay.open .intro-glow{animation:intGlowOut .6s ease-in forwards}
.intro-overlay.open .intro-seam{animation:intSeamFlash .4s ease forwards}
.intro-overlay.open .intro-curtain.top{animation:intCurtainUp .9s cubic-bezier(.65,0,.35,1) .05s forwards}
.intro-overlay.open .intro-curtain.bottom{animation:intCurtainDown .9s cubic-bezier(.65,0,.35,1) .05s forwards}
@keyframes intGlowIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1.2)}}
@keyframes intLogoIn{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}
@keyframes intLineIn{from{width:0}to{width:100px}}
@keyframes intTitleIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes intSeamIn{from{opacity:0}to{opacity:1}}
@keyframes intLogoOut{0%{opacity:1;transform:scale(1)}60%{opacity:.7;transform:scale(2.5)}to{opacity:0;transform:scale(4)}}
@keyframes intFadeUp{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-12px)}}
@keyframes intGlowOut{from{opacity:1;transform:scale(1.2)}to{opacity:0;transform:scale(4)}}
@keyframes intSeamFlash{0%{opacity:1;box-shadow:0 0 20px rgba(212,168,67,.6)}50%{opacity:1;box-shadow:0 0 40px rgba(212,168,67,.8)}to{opacity:0}}
@keyframes intCurtainUp{0%{transform:translateY(0) scaleY(1)}40%{transform:translateY(-2%) scaleY(1.02)}to{transform:translateY(-105%) scaleY(1)}}
@keyframes intCurtainDown{0%{transform:translateY(0) scaleY(1)}40%{transform:translateY(2%) scaleY(1.02)}to{transform:translateY(105%) scaleY(1)}}
body.dark .intro-overlay .intro-curtain.top{background:linear-gradient(180deg,#020a05 0%,#061a0e 70%,#083018 100%)}
body.dark .intro-overlay .intro-curtain.bottom{background:linear-gradient(0deg,#020a05 0%,#061a0e 70%,#083018 100%)}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
html{scroll-behavior:auto}
}