/* O'zbekiston namoz vaqtlari: asosiy uslublar */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout (Zikr): kechki zumrad osmon, oltin girih naqshi. Tepada fonuslar va sarlavha, o'rtada Qibla kompasi, pastda duo va xotira bloki, eng pastda suzuvchi navigatsiya. Bitta tungi mavzu. */
:root{
  --emerald-deep:#0A2E23; --emerald:#0F3D2E; --emerald-mid:#1A5240; --emerald-lit:#1F5C47; --line:#2E6B55;
  --gold:#E3C677; --gold-deep:#C9A24B; --gold-pale:#FFF3C4; --gold-glow:#FFE9A8;
  --cream:#F7F3E8; --mist:#CFE0D6;
  --font-display:'Lora',Georgia,serif; --font-body:'Inter',system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{height:auto}
body{margin:0;font-family:var(--font-body);background:var(--emerald);color:var(--cream);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 96px;
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:16px}
button,select,input{font-family:inherit}
.gold-text{background:linear-gradient(90deg,#E3C677,#FFF3C4,#C9A24B,#E3C677);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmerText 6s linear infinite}
@keyframes shimmerText{to{background-position:200% center}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes swing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes flicker{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes sweep{from{transform:translateX(-130%)}to{transform:translateX(330%)}}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes spark{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.9}90%{opacity:.7}100%{transform:translateY(-105vh) translateX(26px);opacity:0}}
@keyframes bA{0%{opacity:1;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(-90px,-46px) scale(1.3)}}
@keyframes bB{0%{opacity:1;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(-50px,-70px) scale(1.1)}}
@keyframes bC{0%{opacity:1;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(10px,-78px) scale(1.4)}}
@keyframes bD{0%{opacity:1;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(60px,-66px) scale(1.1)}}
@keyframes bE{0%{opacity:1;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(96px,-40px) scale(1.3)}}
@keyframes bF{0%{opacity:1;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(-20px,-56px) scale(1)}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes alignGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(227,198,119,.5))}50%{filter:drop-shadow(0 0 14px rgba(255,233,168,.95))}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,#17604A 0%,#0F3D2E 55%,#0A2E23 100%)}
.bg svg,.bg div{position:absolute}
.spark{bottom:-10px;border-radius:50%;background:radial-gradient(circle,#FFE9A8,rgba(227,198,119,.3));animation:spark linear infinite}

.wrap{width:100%;max-width:1000px;display:flex;flex-direction:column;align-items:center;gap:16px}

/* Bosh qism */
.head{animation:riseIn .9s ease-out both;position:relative;width:100%;max-width:700px;height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:14px}
.lantern{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;animation:swing 4s ease-in-out infinite}
.lantern i{display:block;width:1.5px;background:var(--gold-deep)}
.lantern .lb{display:block;background-repeat:no-repeat;background-position:center;background-size:contain;animation:flick 3.1s ease-in-out infinite}.lantern .lbL{background-image:url(../img/lantern-left.webp)}.lantern .lbR{background-image:url(../img/lantern-right.webp);animation-delay:-1.4s}
h1{position:relative;margin:0;padding:0 56px;text-align:center;font-family:var(--font-display);font-weight:600;font-size:28px;line-height:1.2;letter-spacing:.5px;text-wrap:balance}
.langs{position:relative;margin-top:10px;display:flex;align-items:center;gap:10px}
.langs button{min-width:62px;min-height:28px;padding:0 12px;border:1px solid rgba(201,162,75,.6);border-radius:999px;background:transparent;color:var(--mist);font-size:12px;font-weight:600;cursor:pointer}
.langs button[aria-pressed="true"]{background:linear-gradient(135deg,#F1D88A,#C9A24B);color:var(--emerald)}
button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--gold-pale);outline-offset:3px}

/* Qibla bloki */
.panel{width:100%;display:flex;flex-wrap:wrap;gap:20px;align-items:stretch}
.card{position:relative;overflow:hidden;overflow:clip;min-width:0;border-radius:22px;border:1px solid rgba(201,162,75,.5);background:linear-gradient(160deg,#0A2E23,#1A5240);padding:16px;display:flex;flex-direction:column;gap:12px;animation:riseIn 1s ease-out .15s both}
.card>*{flex-shrink:0}
.compass-card{flex:1.2 1 340px;align-items:center}
.info-card{flex:1 1 320px;animation-delay:.3s}
.eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:600}
.compass{position:relative;width:100%;max-width:340px;aspect-ratio:320/332}
.compass svg{width:100%;height:100%;display:block;overflow:visible}
#dial{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.aligned #ring{animation:alignGlow 1.8s ease-in-out infinite}
.status{min-height:44px;text-align:center;font-family:var(--font-display);font-size:17px;line-height:1.3;color:var(--cream);display:flex;align-items:center;justify-content:center;text-wrap:balance;padding:0 8px}
.aligned .status{color:var(--gold)}
.heading-box{width:100%;max-width:340px;display:flex;flex-direction:column;gap:8px;position:relative}
.heading-box label{font-size:12px;color:var(--gold);font-weight:500;display:flex;justify-content:space-between}
.heading-box output{font-variant-numeric:tabular-nums;color:var(--cream);font-weight:600}
.slide{display:flex;align-items:center;gap:10px}
.step{flex-shrink:0;width:44px;height:44px;border-radius:50%;border:1px solid var(--gold-deep);background:var(--emerald);color:var(--gold);font-size:20px;cursor:pointer;line-height:1}
input[type=range]{flex:1;min-width:0;height:44px;margin:0;background:transparent;accent-color:var(--gold-deep)}
.note{margin:0;font-size:12px;line-height:1.5;color:var(--mist);text-align:center;max-width:340px}

.field{display:flex;flex-direction:column;gap:4px;position:relative}
.field label{font-size:12px;color:var(--gold);font-weight:500}
select{width:100%;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--gold-deep);background:var(--emerald);color:var(--cream);font-size:16px}
.region-name{font-family:var(--font-display);font-size:19px;color:var(--cream);position:relative}
.stats{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.stat{position:relative;border-radius:16px;padding:12px 8px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;background:linear-gradient(160deg,#1F5C47,#10392C);border:1px solid rgba(201,162,75,.45);text-align:center;min-width:0}
.stat.main{grid-column:1 / -1;background:linear-gradient(160deg,#F1D88A,#C9A24B);color:var(--emerald);border-color:transparent;overflow:hidden}
.stat.main::after{content:"";position:absolute;top:0;left:0;width:30%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);animation:sweep 3.6s ease-in-out infinite;pointer-events:none}
.stat span.k{font-size:12px;font-weight:500;color:var(--mist);position:relative}
.stat.main span.k{color:var(--emerald);font-weight:600}
.stat b{font-family:var(--font-display);font-size:26px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;position:relative}
.stat.main b{font-size:34px}
.stat small{font-size:12px;font-weight:600;position:relative;text-transform:uppercase;letter-spacing:1.5px}
.kaaba-line{position:relative;display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--mist);border-top:1px solid rgba(201,162,75,.3);padding-top:12px}
.kaaba-line svg{flex-shrink:0;margin-top:2px}
.kaaba-line em{font-style:normal;color:var(--gold);font-weight:600}

/* Duo */
.dua{animation:riseIn 1s ease-out .45s both;background:rgba(10,46,35,.55);width:100%;max-width:900px;border:1px solid var(--gold-deep);border-radius:16px;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 20px;text-align:center}
.dua p{margin:0;flex:1 1 300px;font-family:var(--font-display);font-size:14px;line-height:1.5;color:var(--gold)}
.amin-col{display:flex;flex-direction:column;align-items:center;gap:4px}
.amin-wrap{position:relative;display:flex;align-items:center;justify-content:center;padding:4px 8px}
.amin{position:relative;overflow:hidden;min-height:38px;padding:0 20px;border:1.5px solid var(--gold-pale);border-radius:999px;background:linear-gradient(135deg,#F1D88A,#C9A24B 55%,#E3C677);color:var(--emerald);font-size:14px;font-weight:700;letter-spacing:.3px;cursor:pointer;display:flex;align-items:center;gap:7px;box-shadow:0 0 14px rgba(227,198,119,.45);transition:transform .15s ease,filter .15s ease}
.amin:hover{filter:brightness(1.08);transform:translateY(-2px)}
.amin:active{transform:scale(.94)}
.amin .shine{position:absolute;top:0;left:0;width:35%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,226,120,.95),transparent);animation:sweep 2.4s ease-in-out infinite;pointer-events:none}
.burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.burst svg{position:absolute}
.caption{font-size:12px;color:var(--mist)}

/* Xotira */
.memorial{position:relative;width:100%;display:flex;flex-direction:column;align-items:center}
.memorial .halo{position:absolute;top:0;left:50%;margin-left:-180px;width:360px;height:180px;background:radial-gradient(ellipse at 50% 60%,rgba(201,162,75,.22),transparent 70%);animation:pulse 5s ease-in-out infinite;pointer-events:none}
.mem-text{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:0 16px}
.divider{display:flex;align-items:center;gap:10px}
.divider i{width:60px;height:1px}
.mem-title{font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1.2}
.mem-sub{font-size:13px;line-height:1.4;letter-spacing:.5px;color:var(--mist);max-width:420px}
.mem-name{font-family:var(--font-display);font-size:22px;font-weight:600;line-height:1.3}
.mem-years{font-size:13px;color:var(--gold);letter-spacing:1px}
.sig{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px 14px;text-align:center;font-family:var(--font-display);font-size:13px;line-height:1.4;letter-spacing:.3px;color:var(--mist)}
.sig b{font-weight:600;color:var(--gold)}

/* Navigatsiya */
.nav-wrap{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:0 max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));display:flex;justify-content:center;pointer-events:none}
nav{pointer-events:auto;width:100%;max-width:440px;display:flex;gap:2px;padding:4px;border-radius:24px;background:linear-gradient(160deg,#1F5C47,#0A2E23);border:1px solid rgba(201,162,75,.65);box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 18px rgba(227,198,119,.15)}
nav button{flex:1 1 0;min-width:0;min-height:54px;padding:6px 0;border:none;border-radius:16px;background:transparent;color:var(--mist);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:600;cursor:pointer}
nav button[aria-current="page"]{background:linear-gradient(135deg,#F1D88A,#C9A24B);color:var(--emerald)}
nav span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soon{position:fixed;inset:0;z-index:40;padding:0 20px 96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;background:radial-gradient(ellipse at 50% 0%,#17604A 0%,#0F3D2E 55%,#0A2E23 100%);animation:riseIn .5s ease-out both}
.soon[hidden]{display:none}
.soon div{font-family:var(--font-display);font-weight:600;font-size:30px;line-height:1.2;color:var(--gold)}
.soon p{margin:0;font-size:14px;color:var(--mist)}


/* Zikr */
.tasbeh-card{flex:1.2 1 340px;align-items:center}
.list-card{flex:1 1 320px;animation-delay:.3s}
.arabic{position:relative;font-family:'Amiri','Scheherazade New',serif;font-weight:700;font-size:34px;line-height:1.5;color:var(--gold-pale);text-align:center;direction:rtl;text-wrap:balance;padding:0 8px}
.translit{position:relative;font-family:var(--font-display);font-size:17px;color:var(--cream);text-align:center;text-wrap:balance}
.meaning{position:relative;font-size:13px;line-height:1.5;color:var(--mist);text-align:center;max-width:320px;text-wrap:balance}
.beads{position:relative;width:100%;max-width:320px;aspect-ratio:1/1}
.beads svg{width:100%;height:100%;display:block;overflow:visible}
.bead{transition:fill .25s ease,r .25s ease,filter .25s ease}
.tap{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--gold-pale);background:radial-gradient(circle at 35% 28%,#FFF3C4,#E3C677 45%,#C9A24B);color:var(--emerald);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 0 26px rgba(227,198,119,.45),inset 0 -8px 18px rgba(0,0,0,.18);transition:transform .12s ease,filter .15s ease;overflow:hidden;padding:0}
.tap:hover{filter:brightness(1.06)}
.tap:active,.tap.pop{transform:translate(-50%,-50%) scale(.94)}
.tap::before{content:"";position:absolute;inset:7px;border-radius:50%;border:1px dashed rgba(15,61,46,.45);animation:spin 40s linear infinite}
.tap b{position:relative;font-family:var(--font-display);font-size:56px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.tap small{position:relative;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.done .tap{animation:aminGlow 1.6s ease-in-out infinite}
@keyframes aminGlow{0%,100%{box-shadow:0 0 0 0 rgba(227,198,119,.6),0 0 26px rgba(227,198,119,.45)}50%{box-shadow:0 0 36px 10px rgba(255,233,168,.6),0 0 26px rgba(227,198,119,.45)}}
.ctrl{position:relative;width:100%;max-width:340px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.seg{display:flex;gap:6px}
.seg button,.reset{min-height:44px;min-width:56px;padding:0 14px;border:1px solid rgba(201,162,75,.6);border-radius:999px;background:transparent;color:var(--mist);font-size:13px;font-weight:600;cursor:pointer}
.seg button[aria-pressed="true"]{background:linear-gradient(135deg,#F1D88A,#C9A24B);color:var(--emerald);border-color:transparent}
.reset{color:var(--gold)}
.msg{position:relative;min-height:22px;font-family:var(--font-display);font-size:15px;color:var(--gold);text-align:center}
.zlist{position:relative;display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.zitem{width:100%;min-height:64px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:10px 14px;border-radius:16px;background:linear-gradient(160deg,#1F5C47,#10392C);border:1px solid rgba(201,162,75,.45);color:var(--cream);cursor:pointer;text-align:left}
.zitem[aria-pressed="true"]{background:linear-gradient(160deg,#F1D88A,#C9A24B);color:var(--emerald);border-color:transparent}
.zitem .zn{font-family:var(--font-display);font-size:16px;font-weight:600;min-width:0}
.zitem .zm{grid-column:1;font-size:12px;color:var(--mist);min-width:0}
.zitem[aria-pressed="true"] .zm{color:var(--emerald)}
.zitem .zc{grid-column:2;grid-row:1 / span 2;font-family:var(--font-display);font-size:24px;font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums}
.zitem[aria-pressed="true"] .zc{color:var(--emerald)}
.total{position:relative;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(201,162,75,.3);padding-top:12px;font-size:13px;color:var(--mist)}
.total b{font-family:var(--font-display);font-size:22px;color:var(--gold);font-variant-numeric:tabular-nums}

/* Bosh sahifa */
.home-card{flex:1 1 380px}
.sched{flex:1.4 1 380px;min-width:0;display:flex;flex-direction:column;gap:10px;animation:riseIn 1s ease-out .3s both}
.dateRow{position:relative;display:flex;align-items:center;gap:12px;margin-top:8px}
.dbadge{position:relative;overflow:hidden;flex-shrink:0;width:54px;border-radius:12px;background:linear-gradient(160deg,#F1D88A,#C9A24B);color:var(--emerald);display:flex;flex-direction:column;align-items:center;box-shadow:0 0 16px rgba(227,198,119,.35)}
.dbadge .m{width:100%;text-align:center;padding:3px 0;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;background:var(--emerald);color:var(--gold)}
.dbadge .d{font-family:var(--font-display);font-size:28px;font-weight:600;line-height:1.1;padding:3px 0 5px}
.dbadge::after,.mini::after{content:"";position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);pointer-events:none}
.dtext{display:flex;flex-direction:column;gap:3px;min-width:0}
.dow{font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.1}
.dline{font-size:13px;color:var(--mist)}
.hijri{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gold);font-weight:500}
.prayers{position:relative;display:flex;flex-wrap:wrap;gap:8px}
.pr{flex:1 1 96px;min-width:0}
.pcard{width:100%;cursor:pointer;position:relative;overflow:hidden;border-radius:16px;padding:12px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;background:linear-gradient(160deg,#1F5C47,#10392C);border:1px solid rgba(201,162,75,.45);color:var(--cream)}
.pcard .pn{position:relative;font-size:12px;color:var(--mist);font-weight:500}
.pcard .pt{position:relative;font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.pcard .pf{height:11px;position:relative;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700}
.pcard.next{background:linear-gradient(160deg,#F1D88A,#C9A24B);color:var(--emerald);border-color:transparent}
.pcard.next .pn{color:var(--emerald);font-weight:600}
.pcard.next .pf{animation:pulse 1.8s ease-in-out infinite}
.pcard.next::after{content:"";position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);animation:sweep 3.2s ease-in-out infinite;pointer-events:none}
.pcard .rose{position:absolute;top:-18px;right:-18px;opacity:.28;animation:spin 30s linear infinite}
.pcard.next .rose{opacity:.22}
.schTitle{display:flex;align-items:center;justify-content:center;gap:12px;padding:11px 16px;border-radius:14px;background:linear-gradient(160deg,#1F5C47,#0A2E23);border:1px solid rgba(201,162,75,.55);box-shadow:0 0 14px rgba(227,198,119,.15);font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:.4px;color:var(--gold)}
.ptabs{display:flex;gap:10px}
.ptab{flex:1 1 0;min-width:0;min-height:88px;padding:12px 6px 10px;border-radius:999px 999px 14px 14px;border:1.5px solid #4A8A72;background:linear-gradient(180deg,#1A5240,#0F3D2E);color:var(--cream);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ptab .n{font-family:var(--font-display);font-size:26px;font-weight:600;line-height:1;color:var(--gold)}
.ptab .l{font-size:12px;font-weight:500;color:var(--mist)}
.ptab[aria-pressed="true"]{border-color:var(--cream);background:linear-gradient(180deg,#FFFFFF,#EFE7CC);color:var(--emerald);box-shadow:0 0 18px rgba(247,243,232,.3)}
.ptab[aria-pressed="true"] .n,.ptab[aria-pressed="true"] .l{color:var(--emerald)}
.ptab[aria-pressed="true"] .l{font-weight:600}
.sbox{overflow:hidden;transition:height .45s ease}
.closed{height:52px;border:1.5px dashed var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 14px;text-align:center;font-size:13px;line-height:1.3;color:var(--mist)}
.tbl{height:236px;overflow:auto;border:1px solid var(--line);border-radius:14px;background:#12442F;animation:riseIn .35s ease-out}
.tr{display:grid;grid-template-columns:minmax(72px,1fr) repeat(6,minmax(0,1fr));gap:2px;align-items:center;padding:7px 4px;font-size:12px;border-bottom:1px solid #1E5440;font-variant-numeric:tabular-nums}
.tr.th{position:sticky;top:0;background:#174A39;padding:8px 4px;font-size:10.5px;letter-spacing:-.3px;font-weight:600;color:var(--gold);border-bottom:1px solid var(--line);z-index:1}
.dcell{display:flex;align-items:center;gap:5px;color:var(--gold);font-weight:600}
.dcell span{font-size:11px}
.mini{position:relative;overflow:hidden;flex-shrink:0;width:32px;border-radius:7px;background:linear-gradient(160deg,#F1D88A,#C9A24B);color:var(--emerald);display:flex;flex-direction:column;align-items:center;box-shadow:0 0 8px rgba(227,198,119,.3)}
.mini .m{width:100%;text-align:center;padding:1px 0;font-size:7px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;background:var(--emerald);color:var(--gold);line-height:1.3}
.mini .d{font-family:var(--font-display);font-size:15px;font-weight:600;line-height:1.15;padding:1px 0 2px}
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:calc(100% - 32px);max-width:420px;z-index:50;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:18px;background:linear-gradient(160deg,#1F5C47,#0A2E23);border:1px solid var(--gold-deep);box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 24px rgba(227,198,119,.25);cursor:pointer;animation:toastIn .4s ease-out}
.toast .tl{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:600}
.toast .tt{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--cream);line-height:1.2}
.toast .ts{font-size:13px;color:var(--mist)}
.toast .td{font-family:var(--font-display);font-size:14px;line-height:1.4;color:var(--gold);border-top:1px solid rgba(201,162,75,.4);margin-top:6px;padding-top:6px}
.zcard{flex:1 1 360px;max-width:560px}
#v-zikr{justify-content:center}
.pickhint{position:relative;margin:0;font-size:13px;line-height:1.5;color:var(--mist)}
.back{position:relative;align-self:flex-start;min-height:44px;padding:0 16px 0 10px;border:1px solid rgba(201,162,75,.6);border-radius:999px;background:rgba(10,46,35,.6);color:var(--gold);font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;cursor:pointer}
.tapring{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--gold);pointer-events:none;opacity:0;animation:ringZ 2.4s ease-out infinite}
@keyframes ringZ{0%{transform:translate(-50%,-50%) scale(1);opacity:.8}100%{transform:translate(-50%,-50%) scale(1.38);opacity:0}}
.tap .press{position:relative;margin-top:4px;display:flex;align-items:center;gap:5px;padding:4px 12px;border-radius:999px;background:var(--emerald);color:var(--gold-pale);font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.taphint{position:relative;margin:0;max-width:320px;text-align:center;font-size:14px;line-height:1.45;font-weight:500;color:var(--cream)}
/* Xarita */
.map-card{flex:1.5 1 400px;align-items:center;padding:12px}
.mapsvg{position:relative;width:100%;max-width:700px;height:auto;display:block;overflow:visible}
.mapwrap{position:relative;width:100%;border-radius:16px;background:radial-gradient(ellipse at 50% 40%,rgba(31,92,71,.9),rgba(10,46,35,.9));border:1px solid rgba(201,162,75,.4)}
.reg{fill:var(--c,#1F5C47);stroke:#C9A24B;stroke-width:1.3;stroke-linejoin:round;cursor:pointer;transition:fill .25s ease}
.reg:not(.sel):hover,.reg:focus-visible{filter:brightness(1.3);outline:none}
.reg.sel{fill:url(#gg);stroke:#FFF3C4;stroke-width:2.2;animation:alignGlow 2.2s ease-in-out infinite}
.country{filter:drop-shadow(0 0 7px rgba(227,198,119,.35))}
.lbl{font:600 12.5px Lora,Georgia,serif;fill:#F7F3E8;paint-order:stroke;stroke:#0A2E23;stroke-width:3px;pointer-events:none}
.qline{stroke:#FFF3C4;stroke-width:1.6;stroke-dasharray:5 5;animation:dashm 1.2s linear infinite}
@keyframes dashm{to{stroke-dashoffset:-20}}
.mchip{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;padding:10px 14px;border-radius:14px;border:1px solid rgba(201,162,75,.5);background:linear-gradient(160deg,#1F5C47,#0A2E23);font-size:13px;color:var(--mist);text-align:center}
.mchip b{font-family:var(--font-display);font-size:16px;color:var(--gold)}
.mapnext b{font-size:30px}.mapnext small{text-transform:none;letter-spacing:.3px;font-size:13px}
@media (max-width:600px){.lbl{display:none}}
/* Xotira */
.pframe{position:relative;width:168px;height:168px;display:flex;align-items:center;justify-content:center;margin:4px 0}
.pframe>svg.ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 40s linear infinite}
.pphoto{position:relative;width:132px;height:132px;border-radius:50%;overflow:hidden;border:3px solid var(--gold);background:radial-gradient(circle at 50% 35%,#2E6B55,#0A2E23);box-shadow:0 0 24px rgba(227,198,119,.4);display:flex;align-items:center;justify-content:center}
.pphoto img{width:100%;height:100%;object-fit:cover;display:block}
.mem-card{flex:1 1 360px;max-width:560px}
.flame{display:inline-block;animation:flicker 1.6s ease-in-out infinite}
.memnote{position:relative;margin:0;font-size:12px;line-height:1.5;color:var(--mist);text-align:center}
html,body{max-width:100%;overflow-x:hidden;touch-action:pan-x pan-y;-webkit-text-size-adjust:100%;text-size-adjust:100%}
nav button[data-i="4"] svg{color:#E5484D;fill:#E5484D;filter:drop-shadow(0 0 5px rgba(229,72,77,.55))}
/* Ixcham */
body{gap:8px;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));padding-bottom:84px}
.wrap{gap:8px}.panel{gap:10px}
.head{height:auto;min-height:132px;padding:8px 0 4px;gap:0}.logo{position:relative;display:block;margin:0 0 4px;filter:drop-shadow(0 0 10px rgba(227,198,119,.5));animation:floaty 7s ease-in-out infinite}.head h1{font-size:23px}.langs{margin-top:4px}
.card{padding:12px;gap:8px;border-radius:18px}
.compass{max-width:270px}.heading-box,.note,.ctrl{max-width:300px}.status{min-height:30px;font-size:15px}
.stats{gap:6px}.stat{padding:8px 6px 6px;border-radius:14px}.stat b{font-size:21px}.stat.main b{font-size:27px}
.prayers{gap:6px}.pr{flex:1 1 84px}.pcard{padding:9px 4px 7px;border-radius:14px}.pcard .pt{font-size:21px}
.dateRow{margin-top:4px}.region-name{font-size:17px}
.ptab{min-height:64px;padding:8px 4px 6px}.ptab .n{font-size:21px}.sched{gap:8px}.schTitle{padding:8px 14px;font-size:15px}
.zitem{min-height:52px;padding:7px 12px;border-radius:14px}.zitem .zc{font-size:21px}.zlist{gap:6px}
.tap b{font-size:46px}.beads{max-width:270px}.arabic{font-size:28px}.translit{font-size:15px}
.mchip{padding:8px 12px}.pframe{width:148px;height:148px}.pphoto{width:116px;height:116px}
.memorial .mem-title,.mem-name{font-size:19px}.mem-sub{font-size:12px}.sig{padding:4px 16px 8px}
/* Footer */
.memorial{width:100%;max-width:520px;margin-top:2px;padding:12px 14px 8px;border:1px solid rgba(201,162,75,.45);border-radius:20px;background:linear-gradient(160deg,rgba(10,46,35,.75),rgba(26,82,64,.55));box-shadow:0 0 18px rgba(227,198,119,.12);overflow:hidden}
.memorial .halo{margin-left:-140px;width:280px;height:120px}
.mem-text{gap:3px;padding:0}.divider i{width:36px}
.memorial .mem-title{font-size:15px;letter-spacing:1.5px;text-transform:uppercase}
.memorial .mem-sub{font-size:12px;line-height:1.4;max-width:360px}
.memorial .mem-name{font-size:22px;margin-top:2px}.memorial .mem-years{font-size:12px}
.sig{margin-top:6px;padding:8px 8px 2px;border-top:1px solid rgba(201,162,75,.3);font-size:12px;width:100%}
#v-qibla.live .heading-box{display:none}
#v-qibla.live #live{box-shadow:0 0 22px rgba(255,233,168,.8)}
@media (max-width:420px){h1{font-size:24px;padding:0 44px}}

.duo-uz{position:relative;font-family:var(--font-display);font-size:15px;line-height:1.8;letter-spacing:.2px;color:var(--cream);text-align:center;max-width:360px;text-wrap:balance;padding:4px 6px}.duo-uz .amintxt{display:inline;font:inherit;color:inherit}

.mcard{position:relative;flex:1 1 100%;width:100%;max-width:480px;margin:0 auto;aspect-ratio:1080/1380;border-radius:16px;overflow:hidden;background:transparent;box-shadow:none;isolation:isolate}
.mcard .plate{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-select:none}
.mcard .medal{position:absolute;left:30%;top:11.9%;width:40%;height:31.3%;pointer-events:none}.mcard .medal img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-select:none}.mcard .medal .fl{transform-origin:8% 92%;will-change:transform;animation:flsway 6s ease-in-out infinite}@keyframes flsway{0%,100%{transform:rotate(-1.4deg) scale(1)}50%{transform:rotate(1.4deg) scale(1.008)}}@media (prefers-reduced-motion:reduce){.mcard .medal .fl{animation:none}}
.mcard .sp{position:absolute;pointer-events:none;will-change:transform}
.mcard .sp img{display:block;width:100%;height:100%;user-select:none;-webkit-user-select:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lantL{animation:swayA 4.6s ease-in-out infinite}
.lantR{animation:swayA 4.6s ease-in-out -2.1s infinite}
.lant img{animation:flick 3.1s ease-in-out infinite}
.lantR img{animation-delay:-1.4s}
.doveL{animation:flyA 6.5s ease-in-out infinite}
.doveR{animation:flyB 7.2s ease-in-out -2s infinite}
.dove img{transform-origin:50% 75%;animation:flap 1.3s ease-in-out infinite}
.doveR img{animation-delay:-.6s}
.roseL{transform-origin:0 100%;animation:swayR 5.6s ease-in-out infinite}
.roseR{transform-origin:100% 100%;animation:swayR 6.2s ease-in-out -2.4s infinite}
@keyframes swayA{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}
@keyframes flick{0%,100%{filter:brightness(1)}40%{filter:brightness(1.1)}70%{filter:brightness(.96)}}
@keyframes flyA{0%,100%{transform:translate(0,0) rotate(-1.5deg)}33%{transform:translate(1.2%,-5%) rotate(1deg)}66%{transform:translate(2.2%,-1.5%) rotate(-.5deg)}}
@keyframes flyB{0%,100%{transform:translate(0,0) rotate(1.5deg)}33%{transform:translate(-1.2%,-5%) rotate(-1deg)}66%{transform:translate(-2.2%,-1.5%) rotate(.5deg)}}
@keyframes flap{0%,100%{transform:scaleY(1) scaleX(1)}50%{transform:scaleY(.93) scaleX(1.015)}}
@keyframes swayR{0%,100%{transform:rotate(-.9deg) scale(1)}50%{transform:rotate(.9deg) scale(1.012)}}
@media (prefers-reduced-motion:reduce){.mcard .sp,.mcard .sp img{animation:none!important}}

/* SEO matn bloki */
.seo{width:100%;max-width:1000px;margin:8px 0 0;padding:18px 18px 14px;border:1px solid rgba(201,162,75,.45);border-radius:20px;background:linear-gradient(160deg,rgba(10,46,35,.75),rgba(26,82,64,.55));color:var(--mist);font-size:13px;line-height:1.6}
.seo h2{font-family:var(--font-display);font-weight:600;font-size:16px;line-height:1.3;color:var(--gold);margin:18px 0 8px}
.seo h2:first-of-type{margin-top:0}
.seo p{margin:0 0 10px}
.seo strong{color:var(--cream);font-weight:600}
.seo-note{padding:8px 12px;border:1px solid rgba(201,162,75,.65);border-radius:12px;background:#0A2E23;color:var(--cream)}
.seo-regions{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.seo-regions button{appearance:none;cursor:pointer;padding:6px 11px;border-radius:999px;border:1px solid rgba(201,162,75,.5);background:rgba(10,46,35,.6);color:var(--cream);font-size:12px;line-height:1.2}
.seo-regions button:hover,.seo-regions button:focus-visible{background:rgba(201,162,75,.22);outline:none}
.seo-dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:6px 14px}
.seo-dl dt{color:var(--gold-pale);font-weight:600}
.seo-dl dd{margin:0}
.seo-faq details{border-top:1px solid rgba(201,162,75,.25);padding:8px 0}
.seo-faq details:last-child{border-bottom:1px solid rgba(201,162,75,.25)}
.seo-faq summary{cursor:pointer;color:var(--cream);font-weight:600;list-style:none;position:relative;padding-right:22px}
.seo-faq summary::-webkit-details-marker{display:none}
.seo-faq summary::after{content:"+";position:absolute;right:2px;top:0;color:var(--gold)}
.seo-faq details[open] summary::after{content:"\2212"}
.seo-faq details p{margin:8px 0 2px}
.seo-alt{margin-top:16px;padding-top:12px;border-top:1px solid rgba(201,162,75,.25);font-size:12px;opacity:.9}
@media (max-width:480px){.seo-dl{grid-template-columns:1fr;gap:2px}.seo-dl dd{margin-bottom:8px}}

.seo-regions a{display:inline-block;padding:6px 11px;border-radius:999px;border:1px solid rgba(201,162,75,.5);background:rgba(10,46,35,.6);color:var(--cream);font-size:12px;line-height:1.2;text-decoration:none}
.seo-regions a:hover,.seo-regions a:focus-visible{background:rgba(201,162,75,.22);outline:none}
.seo-scroll{overflow-x:auto;margin:0 0 10px}
.seo-table{width:100%;border-collapse:collapse;text-align:center;font-variant-numeric:tabular-nums}
.seo-table th,.seo-table td{padding:6px 8px;border-bottom:1px solid rgba(201,162,75,.2)}
.seo-table th{color:var(--gold);font-weight:600;font-size:12px}
.seo-table tr.today td{background:rgba(201,162,75,.18);color:var(--cream);font-weight:600}
.seo-src{font-size:11px;opacity:.8}