/* Namaz v31 — calm, high-contrast product design with visible user accents */
:root{
  --bg:#071a14;
  --bg2:#0b241b;
  --card:#102c22;
  --card2:#17382c;
  --line:rgba(239,231,209,.12);
  --gold:#d6aa55;
  --gold2:#f1d391;
  --green:#38a875;
  --green2:#8ee2b9;
  --txt:#fbf8ef;
  --txt2:#c4cec7;
  --txt3:#8d9c93;
  --red:#ef8d74;
  --radius:22px;
  --shadow:0 22px 60px rgba(0,0,0,.24);
  --hero:linear-gradient(145deg,#174936 0%,#0e3125 56%,#09251c 100%);
}

body{
  font-family:Aptos,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(circle at 12% -10%,color-mix(in srgb,var(--green) 16%,transparent),transparent 32%),
    radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--gold) 8%,transparent),transparent 28%),
    var(--bg);
  letter-spacing:.005em;
}

#view-home{background:transparent}
#view-guide,#view-list{background:var(--bg)}
#view-home::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:linear-gradient(#000,transparent 62%);mask-image:linear-gradient(#000,transparent 62%);
}

#home-scroll{
  width:100%;max-width:760px;margin:0 auto;
  padding:calc(var(--sat) + 14px) 16px calc(var(--sab) + 102px);
  position:relative;
}

.home-top{
  min-height:52px;margin-bottom:14px;padding:5px 6px;
  background:color-mix(in srgb,var(--bg2) 82%,transparent);
  border:1px solid var(--line);border-radius:18px;
  box-shadow:0 12px 34px rgba(0,0,0,.15);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.home-title{cursor:pointer;min-width:0;text-align:left;padding-inline:4px}
.home-title .city{justify-content:flex-start;font-size:1.02rem;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-title .city svg{width:16px;height:16px;color:var(--gold2);flex:none}
.home-title .dates{font-size:.71rem;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{
  min-width:44px;min-height:44px;width:44px;height:44px;border-radius:14px;
  background:transparent;border:1px solid transparent;color:var(--txt2);
}
.iconbtn:hover{background:var(--card2);color:var(--txt)}
.iconbtn svg{width:21px;height:21px;stroke:currentColor}

.hero{
  min-height:190px;text-align:left;padding:24px 24px 20px;margin-bottom:10px;
  border-radius:28px;border:1px solid color-mix(in srgb,var(--gold2) 18%,transparent);
  box-shadow:var(--shadow);isolation:isolate;
}
.hero::before{
  inset:auto -8% -44% 38%;height:150%;
  background:radial-gradient(circle,color-mix(in srgb,var(--gold) 22%,transparent),transparent 60%);
}
.hero::after{
  content:"";position:absolute;right:22px;top:20px;width:78px;height:94px;z-index:-1;opacity:.5;
  border:1px solid color-mix(in srgb,var(--gold2) 28%,transparent);border-bottom:none;border-radius:44px 44px 0 0;
  box-shadow:inset 0 0 0 8px rgba(255,255,255,.015);
}
.hero .label{font-size:.73rem;letter-spacing:1.35px;font-weight:700;color:var(--green2)}
.hero .pname{font-size:1.1rem;margin:8px 0 0;color:var(--gold2)}
.hero .countdown{
  font-family:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  font-size:clamp(2.55rem,12vw,4rem);line-height:1.08;letter-spacing:-2px;margin:4px 0 8px;
}
.hero .sub{font-size:.77rem;max-width:80%;line-height:1.45}
.hero .bar{height:6px;margin-top:16px;background:rgba(255,255,255,.1)}
.hero .bar i{background:linear-gradient(90deg,var(--green2),var(--gold2))}

.time-status{
  width:100%;min-height:58px;margin:0 0 10px;padding:9px 13px;
  display:flex;align-items:center;gap:11px;text-align:left;
  color:var(--txt);background:color-mix(in srgb,var(--card) 86%,transparent);
  border:1px solid color-mix(in srgb,var(--verified) 32%,transparent);border-radius:17px;cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.1);
}
.time-status:hover{background:var(--card2)}
.time-status-dot,.source-big-dot{
  width:10px;height:10px;border-radius:50%;background:var(--verified2);flex:none;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--verified) 13%,transparent),0 0 16px color-mix(in srgb,var(--verified2) 40%,transparent);
}
.time-status.warn{border-color:rgba(239,141,116,.42)}
.time-status.warn .time-status-dot,.source-sheet-head.warn .source-big-dot{background:var(--red);box-shadow:0 0 0 5px rgba(239,141,116,.13)}
.time-status-copy{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}
.time-status-title{font-size:.8rem;font-weight:800;line-height:1.2}
.time-status-detail{font-size:.68rem;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.time-status-arrow{font-size:1.25rem;color:var(--txt3)}

.times{
  background:color-mix(in srgb,var(--card) 92%,transparent);
  border-radius:24px;margin-bottom:12px;min-height:356px;
  box-shadow:0 16px 44px rgba(0,0,0,.13);
}
.trow{padding:7px 17px;min-height:59px;gap:13px}
.trow .ticon{
  width:38px;height:38px;display:grid;place-items:center;border-radius:12px;
  background:rgba(255,255,255,.035);color:var(--gold2);flex:none;
}
.trow .ticon svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.trow .tname{font-size:.94rem}
.trow .tsub{max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt3)}
.trow .tval{font-size:1.08rem;letter-spacing:.3px}
.trow .chev{font-size:1.05rem}
.trow.current{background:linear-gradient(90deg,color-mix(in srgb,var(--green) 16%,transparent),color-mix(in srgb,var(--green) 3%,transparent));box-shadow:inset 3px 0 0 var(--green2)}
.trow.next-up{background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 10%,transparent),transparent)}

.card,.dua-card,.step,.info-note{
  border-color:var(--line);box-shadow:0 14px 34px rgba(0,0,0,.09);
}
.card{border-radius:22px}
#hadith-card{padding:14px 16px;background:color-mix(in srgb,var(--card) 86%,transparent)}
#hadith-card h3{font-size:.66rem;letter-spacing:1.35px}
#hadith-card h3 svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hadith-txt{font-size:.8rem;line-height:1.55}

.vhead{
  padding:calc(var(--sat) + 11px) 16px 12px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
.vhead h1{font-size:1rem;letter-spacing:0}
.vbody{width:100%;max-width:760px;margin:0 auto;padding:16px 16px calc(var(--sab) + 104px)}
.tabs{width:100%;max-width:760px;margin:0 auto;padding:12px 16px}
.tab{min-height:44px;display:flex;align-items:center;padding:9px 16px;border-radius:14px}
.tab.active{background:var(--gold);box-shadow:0 8px 20px color-mix(in srgb,var(--gold) 18%,transparent)}

/* Prayer photographs: eight exact cells in a generated 4×2 transparent sheet. */
.prayer-photo{
  display:block;width:100%;height:100%;min-width:0;aspect-ratio:1;
  background-image:url("images/prayer-poses.webp");
  background-repeat:no-repeat;background-size:400% 200%;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.18));
}
.prayer-photo[data-audience="women"]{background-image:url("images/prayer-poses-women.webp")}
.prayer-photo--qiyam{background-position:0 0}
.prayer-photo--takbir{background-position:33.333% 0}
.prayer-photo--ruku{background-position:66.666% 0}
.prayer-photo--qawma{background-position:100% 0}
.prayer-photo--sajda{background-position:0 100%}
.prayer-photo--sitting{background-position:33.333% 100%}
.prayer-photo--sajda2{background-position:66.666% 100%}
.prayer-photo--salam{background-position:100% 100%}
/* The original men's atlas lets feet cross the row boundary. Keep those pixels
   with the upper poses and skip them for the lower row so no colour strip leaks. */
.prayer-photo[data-audience="men"].prayer-photo--qiyam,
.prayer-photo[data-audience="men"].prayer-photo--takbir,
.prayer-photo[data-audience="men"].prayer-photo--ruku,
.prayer-photo[data-audience="men"].prayer-photo--qawma{background-size:400% 194%}
.prayer-photo[data-audience="men"].prayer-photo--sajda{background-position:0 103%}
.prayer-photo[data-audience="men"].prayer-photo--sitting{background-position:33.333% 103%}
.prayer-photo[data-audience="men"].prayer-photo--sajda2{background-position:66.666% 103%}
.prayer-photo[data-audience="men"].prayer-photo--salam{background-position:100% 103%}
.prayer-photo.is-large{width:100%;height:100%}

/* Premium pictograms are packed into two small image atlases. This keeps the
   interface consistent while the browser downloads only two visual files. */
.art-icon,.wudu-art{
  display:inline-block;width:1.7em;height:1.7em;max-width:100%;max-height:100%;
  flex:none;vertical-align:-.42em;background-repeat:no-repeat;overflow:hidden;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.16));
}
.home-art{
  display:inline-block;width:1.8em;height:1.8em;flex:none;vertical-align:-.45em;
  background-image:url("images/home-atlas.webp");background-repeat:no-repeat;background-size:500% 300%;
  filter:drop-shadow(0 6px 9px rgba(0,0,0,.2));overflow:hidden;
}
.home-art--fajr{background-position:0 3%}.home-art--sunrise{background-position:25% 3%}
.home-art--dhuhr{background-position:50% 3%}.home-art--asr{background-position:75% 3%}
.home-art--maghrib{background-position:100% 3%}.home-art--isha{background-position:0 50%}
.home-art--location{background-position:25% 50%}.home-art--verified{background-position:50% 50%}
.home-art--hadith{background-position:75% 50%}.home-art--home{background-position:100% 50%}
.home-art--pray{background-position:0 97%}.home-art--learn{background-position:25% 100%}
.home-art--more{background-position:50% 100%}.home-art--theme{background-position:75% 100%}
.home-art--language{background-position:100% 98%}
.iconbtn .home-art{width:32px;height:32px;vertical-align:middle}
.home-title .city .home-art{width:24px;height:24px;vertical-align:middle}
.hero{padding-right:126px}
.hero-visual{position:absolute;right:20px;top:22px;width:104px;height:104px;opacity:.95;z-index:-1}
.time-status-visual{width:42px;height:42px;vertical-align:middle}
.trow .ticon{width:50px;height:50px;border-radius:15px}
.trow .ticon .home-art{width:48px;height:48px;vertical-align:middle}
#hadith-card h3 .home-art{width:42px;height:42px;vertical-align:middle}
.bottom-nav .home-art{width:29px;height:29px;vertical-align:middle}
.art-icon{background-image:url("images/ui-atlas.webp");background-size:600% 400%}
.wudu-art{background-image:url("images/wudu-atlas.webp");background-size:500% 200%}
.art-icon--mosque{background-position:0 0}
.art-icon--quran{background-position:20% 0}
.art-icon--dua{background-position:40% 0}
.art-icon--wudu{background-position:60% 0}
.art-icon--qibla{background-position:80% 0}
.art-icon--beads{background-position:100% 0}
.art-icon--ramadan{background-position:0 33.333%}
.art-icon--calendar{background-position:20% 33.333%}
.art-icon--location{background-position:40% 33.333%}
.art-icon--bell{background-position:60% 33.333%}
.art-icon--theme{background-position:80% 33.333%}
.art-icon--globe{background-position:100% 33.333%}
.art-icon--learning{background-position:0 66.666%}
.art-icon--kaza{background-position:20% 66.666%}
.art-icon--search{background-position:40% 66.666%}
.art-icon--bookmark{background-position:60% 66.666%}
.art-icon--audio{background-position:80% 66.666%}
.art-icon--backup{background-position:100% 66.666%}
.art-icon--message{background-position:0 100%}
.art-icon--guide{background-position:20% 100%}
.art-icon--sunrise{background-position:40% 100%}
.art-icon--sunset{background-position:60% 100%}
.art-icon--zakat{background-position:80% 100%}
.art-icon--hajj{background-position:100% 100%}
.wudu-art--intent{background-position:0 0}
.wudu-art--hands{background-position:25% 0}
.wudu-art--mouth{background-position:50% 0}
.wudu-art--nose{background-position:75% 0}
.wudu-art--face{background-position:100% 0}
.wudu-art--arms{background-position:0 100%}
.wudu-art--head{background-position:25% 100%}
.wudu-art--ears{background-position:50% 100%}
.wudu-art--feet{background-position:75% 100%}
.wudu-art--shahada{background-position:100% 100%}
.ditem .di .art-icon,.lang-opt .lf .art-icon{width:30px;height:30px;vertical-align:middle}
.pillar .pi .art-icon{width:40px;height:40px;vertical-align:middle}
.pillar .pi{min-height:42px;display:grid;place-items:center}
.trow .ticon .art-icon{width:31px;height:31px;vertical-align:middle}
.step .pose .wudu-art{width:100%;height:100%;vertical-align:middle}
h2>.art-icon,.card h3>.art-icon,.rakat-label>.art-icon{width:1.8em;height:1.8em;vertical-align:-.52em}
.hero .label>.art-icon{width:2em;height:2em;vertical-align:-.58em}
.flag-image{display:inline-flex;width:30px;height:20px;border-radius:4px;overflow:hidden;box-shadow:0 2px 7px rgba(0,0,0,.18);vertical-align:middle;flex:none}
.flag-image svg{display:block;width:100%;height:100%}
.ui-glyph{width:1.2em;height:1.2em;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ui-glyph-wrap{display:inline-flex;width:1.25em;height:1.25em;align-items:center;justify-content:center;vertical-align:-.24em;color:var(--red)}
.qr-btn.is-active .ui-glyph,.star.on .ui-glyph{fill:color-mix(in srgb,var(--gold) 28%,transparent);color:var(--gold2)}
.star[data-star],[data-zdel],[data-qdel],[data-pdel]{min-width:44px;min-height:44px;box-sizing:border-box;display:inline-grid;place-items:center;flex:none}
.star[data-star]{margin:-8px -8px -8px auto!important;padding:0;border:0;border-radius:12px;background:transparent;color:var(--txt3)}
[data-zdel],[data-qdel],[data-pdel]{border-radius:12px}
@media (prefers-reduced-data:reduce){.art-icon,.wudu-art,.home-art,.prayer-photo{filter:none}}

.step{
  padding:13px;gap:14px;border-radius:20px;align-items:center;
  background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--card2) 68%,var(--card)));
}
.step .pose{
  width:94px;height:94px;padding:5px;border-radius:17px;overflow:hidden;
  background:linear-gradient(145deg,color-mix(in srgb,var(--gold2) 11%,transparent),color-mix(in srgb,var(--green) 6%,transparent));
}
.step .st{font-size:.96rem}
.step .sd{font-size:.82rem;line-height:1.55}
.step .sar{font-size:1.22rem}
.altbtn{min-width:54px;max-width:58px;align-self:center}
.rakat-label{margin-top:24px}
#an-fig{padding:8px;border-radius:30px;background:radial-gradient(circle,color-mix(in srgb,var(--gold) 12%,transparent),transparent 68%)}

#drawer{width:min(88%,360px);background:color-mix(in srgb,var(--bg2) 95%,#000);box-shadow:28px 0 70px rgba(0,0,0,.3)}
#d-body>.ditem{width:100%;border:0;background:transparent;color:inherit;font:inherit;text-align:start}
#d-body>.ditem:hover{background:var(--card)}
.dhead{padding:calc(var(--sat) + 20px) 18px 18px 22px;background-image:url("icons/icon-192.png");background-repeat:no-repeat;background-size:44px;background-position:right 72px bottom 14px;display:flex;align-items:center;gap:12px}
.dhead-copy{flex:1;min-width:0}
.dhead .dt{font-size:1.2rem}
.ditem{min-height:48px;border-radius:14px}
.ditem:hover{background:var(--card)}
.ditem .di{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.035)}
.dsec{margin-top:4px}

#sheet{max-width:620px;margin:0 auto;left:0;right:0;border-radius:28px 28px 0 0;box-shadow:0 -22px 70px rgba(0,0,0,.34)}
.sheet-chrome{min-height:50px;display:flex;align-items:center;padding:6px 12px 0 20px}
#sheet .sheet-chrome .grab{margin:0 auto}
#sheet .sh-body{padding:4px 20px calc(var(--sab) + 28px)}
.btn{min-height:50px;border-radius:16px;box-shadow:0 10px 26px color-mix(in srgb,var(--gold) 12%,transparent)}
.btn.ghost{box-shadow:none}

.source-sheet-head{display:flex;align-items:center;gap:14px;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:18px;margin-bottom:14px}
.source-sheet-head h2{margin:0 0 3px;font-size:1rem}
.source-sheet-head p{margin:0;color:var(--txt3);font-size:.75rem}
.source-facts{margin:0;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:4px 14px}
.source-facts>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.source-facts>div:last-child{border-bottom:0}
.source-facts dt{font-size:.75rem;color:var(--txt3)}
.source-facts dd{margin:0;font-size:.77rem;font-weight:700;text-align:right}
.source-link{display:block;margin:10px 2px 18px;color:var(--gold2);font-size:.76rem;text-decoration:none}
.method-title{font-size:.7rem;color:var(--txt3);text-transform:uppercase;letter-spacing:1.1px;margin:14px 2px 8px}
.method-option{width:100%;display:flex;flex-direction:column;gap:3px;text-align:left;color:var(--txt);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:8px;cursor:pointer}
.method-option.active{border-color:var(--gold);background:linear-gradient(120deg,color-mix(in srgb,var(--gold) 12%,transparent),var(--card))}
.method-option b{font-size:.82rem}
.method-option span{font-size:.7rem;color:var(--txt3);line-height:1.4}
.source-note{font-size:.72rem;color:var(--txt3);line-height:1.5;margin-top:9px;text-align:center}

.bottom-nav{
  position:fixed;z-index:32;left:50%;bottom:calc(var(--sab) + 10px);transform:translateX(-50%);
  width:min(calc(100% - 24px),520px);min-height:70px;padding:7px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
  background:color-mix(in srgb,var(--bg2) 88%,transparent);border:1px solid var(--line);border-radius:23px;
  box-shadow:0 18px 55px rgba(0,0,0,.34);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
}
.bottom-nav[hidden]{display:none!important}
.bottom-nav button{border:0;background:transparent;color:var(--txt3);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:.63rem;font-weight:700;cursor:pointer}
.bottom-nav button:hover,.bottom-nav button.active{color:var(--gold2);background:color-mix(in srgb,var(--gold) 9%,transparent)}

.theme-swatch{
  appearance:none;-webkit-appearance:none;position:relative;width:48px;height:48px;padding:0;
  border:3px solid transparent;border-radius:50%;background:var(--swatch);cursor:pointer;
  box-shadow:0 0 0 1px var(--line),0 4px 12px rgba(0,0,0,.22);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.theme-swatch:hover{transform:translateY(-2px)}
.theme-swatch:focus-visible{outline:3px solid var(--gold2);outline-offset:4px}
.theme-swatch.is-selected{
  border-color:var(--txt);box-shadow:0 0 0 3px var(--gold2),0 7px 18px rgba(0,0,0,.28);
}
.theme-swatch.is-selected::after{
  content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  font-size:1.15rem;font-weight:900;text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.theme-choice{display:grid;justify-items:center;gap:7px;min-width:62px;color:var(--txt2);font-size:.69rem;font-weight:700;line-height:1.2}
.bottom-nav svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

html.bg-light .home-top,html.bg-sand .home-top,html.bg-light .bottom-nav,html.bg-sand .bottom-nav{background:rgba(255,255,255,.84)}
html.bg-light #view-home::before,html.bg-sand #view-home::before{opacity:.18}
html.bg-light .time-status,html.bg-sand .time-status{background:rgba(255,255,255,.76)}
html.bg-light .hero,html.bg-sand .hero{box-shadow:0 18px 42px rgba(40,46,40,.11)}
html.bg-light{--txt3:#58675e}
html.bg-sand{--txt3:#665d4d}

@media (min-width:680px){
  #home-scroll{padding-left:22px;padding-right:22px}
  .times{display:grid;grid-template-columns:1fr 1fr;min-height:0}
  .trow{min-height:72px;border-bottom:1px solid var(--line)}
  .trow:nth-child(odd){border-right:1px solid var(--line)}
  .trow:nth-last-child(-n+2){border-bottom:none}
  .step .pose{width:114px;height:114px}
}

@media (max-width:420px){
  #home-scroll{padding-left:12px;padding-right:12px}
  .home-top{gap:2px}
  .home-top .iconbtn{width:42px;min-width:42px}
  .hero{padding:21px 19px 18px;min-height:178px}
  .hero .sub{max-width:92%}
  .step{align-items:flex-start}
  .step .pose{width:82px;height:82px}
  .step .sar{font-size:1.14rem}
  .altbtn{min-width:46px;max-width:48px;padding:5px 4px}
}

@media (max-height:700px){
  .hero{min-height:154px;padding-top:17px;padding-bottom:15px}
  .hero .countdown{font-size:2.45rem}
  .hero .bar{margin-top:10px}
  .time-status{min-height:52px}
}

/* v29 home — image-led, compact and collision-proof from 320 px upward. */
:root{
  --verified:#38a875;--verified2:#8ee2b9;
  --ok:var(--green);--ok2:var(--green2);--next:var(--gold);--next2:var(--gold2);
}
html.lt{
  --verified:#146844;--verified2:#0f5b3a;
  --ok:var(--green);--ok2:var(--green2);--next:var(--gold);--next2:var(--gold2);
}

.home-title{
  appearance:none;-webkit-appearance:none;border:0;background:transparent;color:inherit;
  font:inherit;min-height:44px;display:flex;flex-direction:column;justify-content:center;
  text-align:start;overflow:hidden;
}
.home-title .city{justify-content:flex-start}
.home-title .city>span:first-child{width:24px;height:24px;display:grid;place-items:center;flex:none}
.home-title #city-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-title:focus-visible,#hadith-card:focus-visible{outline:3px solid var(--gold2);outline-offset:3px}

.hero{
  display:grid;grid-template-columns:minmax(0,1fr) 88px;
  grid-template-areas:"label art" "name art" "count count" "sub sub" "bar bar";
  column-gap:12px;align-items:center;padding:22px 22px 19px;min-height:198px;
  text-align:start;
}
.hero .label{grid-area:label;align-self:end;color:var(--ok2)}
.hero .pname{grid-area:name;align-self:start;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero .countdown{grid-area:count;white-space:nowrap;font-variant-numeric:tabular-nums}
.hero .sub{grid-area:sub;max-width:none}
.hero .bar{grid-area:bar;width:100%}
.hero-visual{
  grid-area:art;position:static;width:88px;height:88px;align-self:start;justify-self:end;
  opacity:1;z-index:0;
}
.hero::after{inset-inline-end:22px;right:auto;top:18px;width:70px;height:82px}
.hero .bar i{background:linear-gradient(90deg,var(--ok2),var(--next2))}

.time-status{text-align:start;padding:8px 12px;gap:10px;border-color:color-mix(in srgb,var(--verified) 42%,transparent)}
.time-status-visual{width:44px;height:44px}
.time-status-title{font-size:.79rem}
.time-status-detail{font-size:.69rem}
.time-status-arrow{flex:none}

#times-list.times{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(88px,auto);
  gap:9px;padding:9px;min-height:0;overflow:visible;background:color-mix(in srgb,var(--card) 82%,transparent);
}
#times-list .trow{
  display:grid;grid-template-columns:48px minmax(0,1fr);
  grid-template-areas:"icon name" "icon value";align-items:center;column-gap:9px;row-gap:2px;
  min-width:0;min-height:88px;padding:9px;border:1px solid var(--line);border-radius:17px;
  background:color-mix(in srgb,var(--card2) 62%,var(--card));box-shadow:0 8px 22px rgba(0,0,0,.08);
}
#times-list .trow:last-child{border-bottom:1px solid var(--line)}
#times-list .trow .ticon{grid-area:icon;width:48px;height:48px;background:transparent}
#times-list .trow .ticon .home-art{width:48px;height:48px}
#times-list .trow .tname{
  grid-area:name;min-width:0;align-self:end;font-size:.82rem;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#times-list .trow .tsub{display:none;max-width:100%}
#times-list .trow .tval{
  grid-area:value;align-self:start;min-width:0;flex:none;text-align:start;
  font-size:1.17rem;line-height:1.15;font-weight:800;letter-spacing:.15px;
}
#times-list .trow .chev{display:none;flex:none}
#times-list .trow.current{
  border-color:color-mix(in srgb,var(--ok) 54%,transparent);
  background:linear-gradient(145deg,color-mix(in srgb,var(--ok) 18%,var(--card)),var(--card));
  box-shadow:inset 3px 0 0 var(--ok),0 9px 24px rgba(0,0,0,.1);
}
html[dir=rtl] #times-list .trow.current{box-shadow:inset -3px 0 0 var(--ok),0 9px 24px rgba(0,0,0,.1)}
#times-list .trow.current .tname,#times-list .trow.current .tval{color:var(--ok2)}
#times-list .trow.next-up{
  border-color:color-mix(in srgb,var(--next) 46%,transparent);
  background:linear-gradient(145deg,color-mix(in srgb,var(--next) 13%,var(--card)),var(--card));
}
#times-list .trow.next-up .tval{color:var(--next2)}

#hadith-card{
  width:100%;display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:11px;
  color:var(--txt);font:inherit;text-align:start;cursor:pointer;
}
#hadith-card h3{grid-column:1/-1;display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:11px;margin-bottom:6px}
#hadith-card h3 .home-art{width:44px;height:44px;grid-column:1}
#hadith-card h3 #hadith-title{grid-column:2;min-width:0}
#hadith-card .hadith-txt,#hadith-card .hadith-src{grid-column:2}
#hadith-card .hadith-src{text-align:end}

.bottom-nav{min-height:76px;padding:6px}
.bottom-nav button{min-width:44px;min-height:58px;gap:3px;font-size:.7rem}
.bottom-nav .home-art{width:32px;height:32px}

/* User accents remain readable as foreground colors on light/sand surfaces. */
html.lt.acc-blue{--gold:#285fae;--gold2:#214f91;--green:#285fae;--green2:#214f91}
html.lt.acc-red{--gold:#a53232;--gold2:#8f2929;--green:#a53232;--green2:#8f2929}
html.lt.acc-green{--gold:#126540;--gold2:#0e5736;--green:#126540;--green2:#0e5736}
html.lt.acc-purple{--gold:#6b3b9c;--gold2:#5b2e89;--green:#6b3b9c;--green2:#5b2e89}
html.lt.acc-pink{--gold:#98265f;--gold2:#842050;--green:#98265f;--green2:#842050}

@media (min-width:680px){
  #times-list.times{grid-template-columns:repeat(3,minmax(0,1fr))}
  #times-list .trow,#times-list .trow:nth-child(odd),#times-list .trow:nth-last-child(-n+2){border-width:1px;border-style:solid}
}

@media (max-width:420px){
  .hero{padding:19px 18px 17px;min-height:188px}
  .hero::after{inset-inline-end:18px}
  #times-list.times{gap:8px;padding:8px}
  #times-list .trow{grid-template-columns:44px minmax(0,1fr);column-gap:7px;padding:8px}
  #times-list .trow .ticon,#times-list .trow .ticon .home-art{width:44px;height:44px}
}

@media (max-width:350px){
  .home-title .city>span:first-child{display:none}
  .hero{grid-template-columns:minmax(0,1fr) 72px;column-gap:8px;padding-inline:16px}
  .hero-visual{width:72px;height:72px}
  .hero::after{width:58px;height:70px;inset-inline-end:17px}
  .hero .countdown{font-size:2.25rem;letter-spacing:-1.4px}
  .time-status-visual{width:38px;height:38px}
  #times-list .trow{grid-template-columns:40px minmax(0,1fr);column-gap:6px}
  #times-list .trow .ticon,#times-list .trow .ticon .home-art{width:40px;height:40px}
  #times-list .trow .tname{font-size:.76rem}
  #times-list .trow .tval{font-size:1.05rem}
  .bottom-nav{width:calc(100% - 16px)}
}

/* v36: compact navigation, selectable Hanafi guide presentation and device services */
.menu-hub-list{display:grid;gap:7px}
.menu-hub-item{width:100%;border:0;text-align:left;font:inherit;color:inherit;background:transparent}
.menu-hub-item .di{display:flex;align-items:center;justify-content:center;flex:0 0 42px}
.help-feedback{margin:16px 0 8px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.help-feedback b{display:block;color:var(--gold2);font-size:.84rem;margin-bottom:9px}
.help-feedback textarea{width:100%;box-sizing:border-box;resize:vertical;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:11px 12px;color:var(--txt);font:inherit;font-size:16px;outline:none}
.review-panel,.companion-card,.install-card{border:1px solid color-mix(in srgb,var(--gold) 38%,var(--line));border-radius:16px;padding:13px 14px;background:color-mix(in srgb,var(--gold) 8%,var(--card));color:var(--txt2);font-size:.78rem;line-height:1.55;margin:0 0 12px}
.review-panel strong,.companion-card strong,.install-card strong{display:block;color:var(--gold2);font-size:.84rem;margin-bottom:4px}
.review-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;background:color-mix(in srgb,#e6a23c 18%,transparent);border:1px solid color-mix(in srgb,#e6a23c 48%,transparent);color:var(--txt);font-size:.68rem;font-weight:750;margin:4px 0 10px}
.review-option{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:start;margin-top:10px;padding:10px;border-radius:13px;border:1px solid var(--line);background:var(--card)}
.review-option[aria-disabled="true"]{opacity:.72}
.guide-audience{margin:10px 0 12px;padding:12px;border:1px solid color-mix(in srgb,var(--gold) 30%,var(--line));border-radius:17px;background:linear-gradient(145deg,color-mix(in srgb,var(--gold) 8%,var(--card)),var(--card));box-shadow:0 8px 24px rgba(0,0,0,.08)}
.guide-audience-label{margin:0 2px 8px;color:var(--txt3);font-size:.69rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.guide-audience-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.audience-btn{min-height:46px;border:1px solid var(--line);border-radius:13px;padding:8px 10px;background:var(--card2);color:var(--txt2);font:inherit;font-size:.75rem;font-weight:750;line-height:1.25;cursor:pointer}
.audience-btn.active{border-color:color-mix(in srgb,var(--gold) 74%,var(--line));background:color-mix(in srgb,var(--gold) 18%,var(--card));color:var(--gold2);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 20%,transparent)}
.audience-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--gold) 46%,transparent);outline-offset:2px}
.guide-audience-note{margin-top:10px;padding:10px 11px;border-radius:12px;background:color-mix(in srgb,var(--green2) 7%,var(--card2));color:var(--txt2);font-size:.72rem;line-height:1.55}
.guide-audience-note b{color:var(--gold2)}
.guide-audience-sources{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}
.guide-audience-sources a{color:var(--green2);font-weight:750;text-decoration-thickness:1px;text-underline-offset:3px}
@media(max-width:390px){.guide-audience-buttons{grid-template-columns:1fr}.audience-btn{min-height:42px}}
.companion-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.companion-state{display:inline-flex;align-items:center;gap:6px;font-weight:750}
.companion-state::before{content:"";width:8px;height:8px;border-radius:50%;background:#d49b3d;box-shadow:0 0 0 4px color-mix(in srgb,#d49b3d 16%,transparent)}
.companion-state.ok::before{background:#55b884;box-shadow:0 0 0 4px color-mix(in srgb,#55b884 16%,transparent)}
.companion-card .btn,.install-card .btn{margin-top:10px}

/* v38: transparent privacy overview and reversible confirmation before reset */
.privacy-head{display:flex;align-items:center;gap:13px;margin:0 0 12px}
.privacy-head h2{margin:0 0 4px!important}
.privacy-art{width:48px;height:48px;display:grid;place-items:center;flex:none;border:1px solid color-mix(in srgb,var(--green) 38%,var(--line));border-radius:15px;background:color-mix(in srgb,var(--green) 12%,var(--card))}
.privacy-art .art-icon{width:38px;height:38px}
.privacy-status{color:var(--green2);font-size:.7rem;font-weight:800;line-height:1.35}
.privacy-intro,.privacy-card p,.privacy-danger p{color:var(--txt2);font-size:.79rem;line-height:1.6;margin:0}
.privacy-intro{margin-bottom:12px}
.privacy-card,.privacy-danger{margin:10px 0;padding:14px;border:1px solid var(--line);border-radius:17px;background:var(--card);box-shadow:0 10px 28px rgba(0,0,0,.08)}
.privacy-card h3,.privacy-danger h3{margin:0 0 8px;color:var(--gold2);font-size:.86rem;line-height:1.35}
.privacy-card ul{margin:10px 0 0;padding-inline-start:20px;color:var(--txt2);font-size:.76rem;line-height:1.55}
.privacy-card li+li{margin-top:5px}
.privacy-count{display:inline-flex;gap:5px;align-items:center;margin:0 0 2px;padding:5px 9px;border:1px solid color-mix(in srgb,var(--green) 34%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--green) 10%,transparent);color:var(--txt2);font-size:.68rem}
.privacy-count b{color:var(--green2)}
.privacy-offline{margin-top:9px;color:var(--txt3);font-size:.68rem}
.privacy-services{display:grid;gap:8px;margin-top:11px}
.privacy-service{display:grid;gap:2px;padding:9px 10px;border-radius:12px;background:var(--card2);color:var(--txt2);font-size:.72rem;line-height:1.5}
.privacy-service b{color:var(--txt);font-size:.75rem}
.privacy-danger{border-color:color-mix(in srgb,var(--red) 45%,var(--line));background:color-mix(in srgb,var(--red) 5%,var(--card))}
.privacy-danger h3{color:var(--red)}
.privacy-hint{margin-top:9px!important;color:var(--txt3)!important;font-size:.71rem!important}
.privacy-delete{background:color-mix(in srgb,var(--red) 84%,#531b16)!important;color:#fff!important;box-shadow:none!important}
#privacy-delete[hidden]{display:none!important}
.privacy-confirm{margin-top:12px;padding:12px;border:1px solid color-mix(in srgb,var(--red) 40%,var(--line));border-radius:13px;background:color-mix(in srgb,var(--red) 8%,var(--card2))}
.privacy-confirm[hidden]{display:none!important}
.privacy-confirm>b{display:block;color:var(--red);font-size:.82rem;margin-bottom:5px}
.privacy-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.privacy-confirm-actions .btn{margin:0}
.privacy-live{min-height:1.4em;margin-top:9px;color:var(--gold2);font-size:.72rem;line-height:1.45}
.privacy-reset-done{text-align:center;padding:12px 2px 8px}
.privacy-reset-done h2{margin:8px 0 6px!important}
.privacy-reset-done p{margin:0;color:var(--txt2);font-size:.82rem;line-height:1.6}
.privacy-reset-check{width:58px;height:58px;display:grid;place-items:center;margin:0 auto;border-radius:50%;background:color-mix(in srgb,var(--green) 18%,var(--card));border:1px solid color-mix(in srgb,var(--green) 48%,var(--line));color:var(--green2);font-size:1.8rem;font-weight:900}
@media(max-width:390px){.privacy-confirm-actions{grid-template-columns:1fr}.privacy-card,.privacy-danger{padding:12px}}

/* v47 — illuminated Qur'an pages, centered reading typography and calmer navigation. */
body.product-ready #btn-menu{display:none}
.sh-body button.lang-opt{width:100%;color:var(--txt);font:inherit;text-align:start}
.bottom-nav .art-icon{width:32px;height:32px;vertical-align:middle}
.bottom-nav button{position:relative}
.bottom-nav button.active::after{content:"";position:absolute;bottom:3px;width:5px;height:5px;border-radius:50%;background:var(--gold2);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 10%,transparent)}

@media(max-width:520px){
  #times-list.times{grid-template-columns:1fr;grid-auto-rows:auto;gap:7px;padding:8px}
  #times-list .trow{
    grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:"icon name value";
    min-height:66px;padding:8px 11px;column-gap:11px;border-radius:16px
  }
  #times-list .trow .ticon,#times-list .trow .ticon .home-art{width:48px;height:48px}
  #times-list .trow .tname{align-self:center;font-size:.88rem;white-space:nowrap}
  #times-list .trow .tval{align-self:center;text-align:end;font-size:1.16rem}
  #times-list .trow .tsub,#times-list .trow .chev{display:none}
}

@media(max-width:350px){
  #times-list .trow{grid-template-columns:42px minmax(0,1fr) auto;column-gap:8px;padding-inline:8px}
  #times-list .trow .ticon,#times-list .trow .ticon .home-art{width:42px;height:42px}
  #times-list .trow .tname{font-size:.8rem}#times-list .trow .tval{font-size:1.08rem}
}

/* v47 — calm floating navigation and quiet source status. */
.time-status[hidden]{display:none!important}
.bottom-nav{
  width:min(calc(100% - 20px),470px);min-height:72px;padding:6px;gap:2px;border-radius:24px;
  background:color-mix(in srgb,var(--bg2) 91%,transparent);border-color:color-mix(in srgb,var(--line) 82%,var(--gold) 18%);
  box-shadow:0 18px 46px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.035)
}
.bottom-nav button{
  position:relative;min-width:0;min-height:58px;padding:5px 3px 7px;gap:3px;border-radius:17px;
  color:var(--txt2);background:transparent;font-size:.72rem;font-weight:720;line-height:1;white-space:nowrap;
  touch-action:manipulation;transition:color .18s ease,background-color .18s ease,transform .18s ease
}
.bottom-nav__icon{width:30px;height:30px;display:grid;place-items:center;line-height:0;transition:transform .18s ease}
.bottom-nav__label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.bottom-nav .home-art,.bottom-nav .art-icon{
  width:28px;height:28px;vertical-align:middle;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))
}
.bottom-nav button.active{color:var(--gold2);background:color-mix(in srgb,var(--gold) 6%,transparent)}
.bottom-nav button.active .bottom-nav__icon{transform:translateY(-1px)}
.bottom-nav button.active::after{
  content:"";position:absolute;left:50%;bottom:2px;width:16px;height:3px;transform:translateX(-50%);
  border-radius:999px;background:var(--gold2);box-shadow:none
}
.bottom-nav button:focus-visible{outline:3px solid color-mix(in srgb,var(--gold2) 62%,transparent);outline-offset:2px}
@media(hover:hover){.bottom-nav button:not(.active):hover{color:var(--txt);background:color-mix(in srgb,var(--txt) 5%,transparent)}}
html.bg-light .bottom-nav,html.bg-sand .bottom-nav{background:color-mix(in srgb,#fff 90%,transparent);box-shadow:0 16px 38px rgba(64,53,32,.16),inset 0 1px 0 #fff}
@media(max-width:350px){
  .bottom-nav{width:calc(100% - 16px);padding-inline:4px}
  .bottom-nav button{font-size:.68rem;padding-inline:2px}
}