:root{
  --deep:#05394b;--deep2:#0a5260;--teal:#087b73;--cyan:#60e0e7;--gold:#e9c56a;
  --white:#f7ffff;--muted:#c0d7da;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#062f3b;color:var(--white)}button{font:inherit;color:inherit}
body{display:grid;place-items:center;background:radial-gradient(circle at 50% 0,#0b6b79 0,#063847 46%,#041f29 100%)}
.app-shell{position:relative;width:min(100vw,440px);height:100dvh;max-height:960px;overflow:hidden;background:linear-gradient(#12666f,#0a5260 55%,#05394b);box-shadow:0 0 45px #00151f88}
.screen{position:absolute;inset:0 0 136px;display:none;overflow:hidden}.screen.active{display:block}

/* HOME — matched to the frozen v2.08 app layout */
.home-stage{position:absolute;inset:0 0 33.5%;overflow:hidden;background:#04343b}.hero-photo{position:absolute;inset:0;background:#0b5360;overflow:hidden}.hero-photo:before{content:"";position:absolute;inset:-12px;background:url('assets/hero_mosque_bg.webp') center 46%/cover no-repeat;filter:blur(9px);opacity:.82}.hero-photo:after{content:"";position:absolute;inset:0;background:url('assets/hero_mosque_bg.webp') center 46%/95.5% auto no-repeat}.hero-tint{position:absolute;inset:0;background:linear-gradient(180deg,#052f3830 0,#06313b0c 42%,#06455352 72%,#084858 100%)}
.hero-tint:after{content:"";position:absolute;left:0;right:0;bottom:0;height:154px;background:linear-gradient(180deg,transparent,#084858 72%,#084858)}
.share-btn{position:absolute;right:14px;top:calc(max(0px,env(safe-area-inset-top)) + 20px);width:40px;height:40px;border:1px solid #b7ffff55;border-radius:50%;background:linear-gradient(#2a7c84b3,#145b67b8);backdrop-filter:blur(7px);z-index:6;display:grid;place-items:center;box-shadow:0 6px 15px #001d2860}
.share-btn svg{width:22px;height:22px;fill:none;stroke:#f5ffff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.countdown-dome{position:absolute;top:calc(max(0px,env(safe-area-inset-top)) + 16px);left:50%;transform:translateX(-50%);width:230px;height:126px;border:1px solid rgba(121,241,236,.84);border-radius:124px 124px 16px 16px;background:linear-gradient(180deg,rgb(18 121 128 / .94),rgb(7 88 101 / .94) 58%,rgb(3 55 70 / .96));box-shadow:0 8px 20px #001e2b6e,inset 0 1px 0 #8ffaf528;overflow:hidden;z-index:4}
.arc-svg{position:absolute;inset:0;width:100%;height:100%}.arc{fill:none;stroke-linecap:round}.track{stroke:rgba(12,49,58,.41);stroke-width:9.4}.progress{stroke:#60e0e7;stroke-width:7.9;filter:drop-shadow(0 0 3px #43d9e6);stroke-dasharray:1;stroke-dashoffset:1}.arc-head-glow{fill:rgba(108,244,245,.27)}.arc-head{fill:#74ecf1}
.countdown-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px 28px 0;text-shadow:0 1px 3px #00151c80}.count-caption{font-size:9px;color:rgba(255,255,255,.87);line-height:1.05;white-space:nowrap}.count-prayer{font-size:15.5px;margin-top:4px;white-space:nowrap}.count-time{font:500 27px/1 "Segoe UI",sans-serif;letter-spacing:.035em;margin-top:3px;white-space:nowrap}.place-chip{position:absolute;top:calc(max(0px,env(safe-area-inset-top)) + 144px);left:50%;transform:translateX(-50%);width:102px;height:30px;display:grid;place-items:center;border-radius:28px;border:1px solid rgba(128,242,236,.84);background:linear-gradient(#086a72,#044e5b 55%,#023949);box-shadow:0 7px 16px #001e2b77,inset 0 1px #96fcf620;z-index:5;font-size:14.5px}
.today-home-reset{position:absolute;left:50%;bottom:88px;transform:translateX(-50%);width:31px;height:31px;border-radius:50%;border:1px solid rgba(198,241,241,.5);background:linear-gradient(rgba(91,169,171,.44),rgba(49,128,137,.41),rgba(24,96,111,.43));display:grid;place-items:center;z-index:6;box-shadow:0 4px 10px #001d2940}.today-home-reset[hidden]{display:none!important}.today-home-reset svg{width:18px;height:18px;fill:none;stroke:#ecffff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.today-home-reset .today-dot{fill:#ecffff;stroke:none}
.date-card{position:absolute;left:10px;right:10px;bottom:17px;height:66px;display:grid;grid-template-columns:37px minmax(0,1fr) 1px minmax(0,1.1fr) 37px;align-items:center;padding:6px 5px;border:1px solid rgba(168,208,214,.58);border-radius:30px;background:linear-gradient(180deg,rgb(61 126 132 / .88),rgb(28 92 111 / .90),rgb(14 66 88 / .92));backdrop-filter:blur(13px);box-shadow:0 8px 18px #001d2970;z-index:4}.date-arrow{width:30px;height:30px;margin:auto;padding:0;border:1px solid rgba(255,255,255,.282);border-radius:50%;background:rgba(255,255,255,.106);display:grid;place-items:center}.date-arrow .chevron{width:18px;height:18px;overflow:visible;fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}.date-arrow.prev .chevron{transform:translateX(-.55px)}.date-arrow.next .chevron{transform:translateX(.55px)}.date-half{height:100%;border:0;background:transparent;display:flex;align-items:center;justify-content:center;gap:2px;padding:0 4px;min-width:0}.date-big{width:38px;flex:0 0 38px;font-size:20px;font-weight:800;text-align:center;white-space:nowrap}.date-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0}.date-copy b{font-size:9.2px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.date-copy small{font-size:9.3px;color:#fff;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.date-divider{height:42px;background:rgba(235,246,238,.39)}

.prayer-region{position:absolute;left:0;right:0;bottom:0;height:33.5%;padding:0 16px 2px;background:linear-gradient(#084858,#084858 22%,#084656 43%,#074252 64%,#063d4e 82%,#05394b);overflow:visible}.prayer-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:70px;gap:4px 12px;transform:translateY(-8px)}.prayer-card{position:relative;display:flex;align-items:center;min-width:0;border:1px solid rgba(143,181,189,.46);border-radius:24px;background:linear-gradient(180deg,#296374,#14475a 54%,#0a3247);box-shadow:inset 0 1px rgba(143,218,220,.07),0 2px 6px #001e2b30;overflow:hidden}.prayer-card.active{border:2px solid rgba(233,197,106,.84);background:linear-gradient(180deg,#b18736,#7b5f2c 55%,#3f4f45);box-shadow:0 0 12px rgba(210,172,78,.14),inset 0 1px rgba(239,214,142,.13)}.prayer-card.active:after{content:"";position:absolute;inset:0;border-radius:inherit;background:url("assets/motifs/active_card_motif.svg") center/100% 100% no-repeat;pointer-events:none}.prayer-icon-wrap{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;margin-left:11px;margin-right:8px;border-radius:50%;background:transparent;z-index:2}.prayer-icon{width:42px;height:42px}.prayer-copy{z-index:2;min-width:0}.prayer-name{font-size:14px;line-height:1.05;white-space:nowrap}.prayer-time{font-size:16px;font-weight:750;margin-top:2px;line-height:1.05;white-space:nowrap}.prayer-card.active .prayer-name,.prayer-card.active .prayer-time{color:#ffdc70}.motif-large{position:absolute;width:224px;height:236px;right:-56px;bottom:-2px;background:url("assets/motifs/home_lower_right_motif.svg") center/100% 100% no-repeat;z-index:1;pointer-events:none}

/* Footer dock — exact v2.08 AppNav geometry, with More replacing Settings only. */
.bottom-nav{position:absolute;left:0;right:0;bottom:0;height:136px;display:grid;grid-template-columns:1fr 1fr 1fr;z-index:20;padding:0 12px;overflow:visible;background:linear-gradient(to bottom,var(--nav-gap-bg,#05394b) 0 16px,transparent 16px)}.bottom-nav.home-active{--nav-gap-bg:#05394b}.bottom-nav.calendar-active{--nav-gap-bg:#07363f}.nav-dock-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.nav-item{position:relative;z-index:2;border:0;background:transparent;height:100%;color:#becace;display:block;font-size:10.6px;padding:0;text-align:center}.nav-item .nav-icon{position:absolute;top:59px;left:50%;transform:translateX(-50%);width:32px;height:32px;margin:0;fill:none;stroke:currentColor;stroke-width:2.35;stroke-linecap:round;stroke-linejoin:round}.nav-item>span{position:absolute;top:93px;left:0;right:0;height:22px;display:grid;place-items:center;margin:0;white-space:nowrap}.nav-item.active{color:#fff;font-size:11.2px;font-weight:700;text-shadow:0 1px 5.5px rgba(0,0,0,.67)}.nav-item:before{content:"";position:absolute;left:50%;top:31px;width:88px;height:88px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(86,213,226,.094),transparent 70%);opacity:0;pointer-events:none}.nav-item.active:not(.center-nav):before{opacity:1}.nav-item .active-underline{display:none;position:absolute;top:114px;left:50%;transform:translateX(-50%);width:82px;height:12px;background:linear-gradient(90deg,transparent 10%,rgba(111,232,242,.70),#fff 50%,rgba(111,232,242,.70),transparent 90%);mask:linear-gradient(#000 0 0) center/80% 1.2px no-repeat;filter:drop-shadow(0 0 4px rgba(71,218,233,.45));border-radius:0}.nav-item.active:not(.center-nav) .active-underline{display:block}.center-nav .nav-icon{top:54px;width:29px;height:29px;color:#2b3d45;stroke:#2b3d45}.center-nav .cal-dots{fill:#2b3d45;stroke:none}.center-nav>span{top:97px}.nav-more{fill:currentColor!important;stroke:none!important;width:32px!important;height:32px!important}.bottom-nav.more-active .nav-item{color:#becace;font-size:10.6px;font-weight:400;text-shadow:none}.bottom-nav.more-active #moreNav{color:#fff;font-size:11.2px;font-weight:700;text-shadow:0 1px 5.5px rgba(0,0,0,.67)}.bottom-nav.more-active #moreNav:before{opacity:1}.bottom-nav.more-active #moreNav .active-underline{display:block}.bottom-nav.more-active #homeNav .active-underline,.bottom-nav.more-active #calendarNav .active-underline{display:none}

.status-banner{position:absolute;z-index:80;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);max-width:90%;padding:7px 12px;border-radius:14px;background:#0b3d46e8;border:1px solid #bfffff33;color:#fff;font-size:12px;box-shadow:0 5px 15px #001a2266}

/* Existing Calendar / More kept intentionally stable in this Home-match pass. */
.calendar-wrap{position:relative;height:100%;padding:max(12px,env(safe-area-inset-top)) 17px 8px;background:linear-gradient(#0d535b,#07363f);display:grid;grid-template-rows:72px 42px 25px 1fr 116px;gap:7px}.calendar-wrap:before{content:"";position:absolute;left:10px;right:10px;top:calc(max(12px,env(safe-area-inset-top)) + 79px);bottom:131px;border:1px solid rgba(207,235,222,.30);border-radius:22px;pointer-events:none}.calendar-summary{position:relative;border-radius:22px;border:1px solid #7ccbd38c;background:linear-gradient(#14535b,#0f454f);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 52px}.calendar-date-main{font-size:16px;font-weight:750;text-align:center}.calendar-date-hijri{font-size:11px;color:#c7e1e2;margin-top:3px;text-align:center}.today-reset{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:1px solid #ffffff2a;background:#ffffff12}.month-bar{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;padding:0 12px}.month-bar button{width:40px;height:38px;padding:0;border:0;background:rgba(106,216,224,.137);border-radius:50%;display:grid;place-items:center;justify-self:center}.month-bar .chevron{width:22px;height:22px;overflow:visible;fill:none;stroke:#b8f4f6;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}.month-bar .prev .chevron{transform:translateX(-.55px)}.month-bar .next .chevron{transform:translateX(.55px)}.month-bar div{text-align:center;font-size:19px;font-weight:800;color:#8fdfef}.weekday-row{display:grid;grid-template-columns:repeat(7,1fr);font-size:9px;color:#dcebec;text-align:center;align-items:center}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);gap:2px;min-height:0}.day-cell{border:0;background:transparent;padding:0;display:grid;place-items:center;color:#f6fcfc;font-size:13px}.day-pill{width:43px;height:41px;border:1px solid transparent;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center}.day-pill>span{height:21px;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:21px}.day-pill small{height:14px;display:flex;align-items:center;justify-content:center;font-size:8.8px;line-height:14px;color:#b8f4f6}.day-cell.selected .day-pill{background:#49aeb9;border-color:#97eef2}.day-cell.selected .day-pill>span{font-weight:800;color:#fff}.day-cell.selected .day-pill small{color:#e0fbfc}.day-cell.today:not(.selected) .day-pill{background:rgba(98,212,221,.137);border-color:rgba(112,222,229,.824)}.day-cell.today:not(.selected) .day-pill>span{font-weight:800;color:#fff}.day-cell.other{opacity:.22}.calendar-times{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:5px}.cal-time{border:1px solid #78b4bc55;border-radius:15px;background:#124956cc;display:flex;flex-direction:column;align-items:center;justify-content:center}.cal-time b{font-size:11px}.cal-time span{font-size:12px;margin-top:2px;color:#e9ffff}
.modal-layer{position:absolute;inset:0;z-index:100}.modal-backdrop{position:absolute;inset:0;background:#00111699;backdrop-filter:blur(3px)}.more-sheet{position:absolute;left:10px;right:10px;bottom:10px;max-height:74%;border-radius:28px;border:1px solid #b7ffff42;background:linear-gradient(#123f49,#082f3a);box-shadow:0 18px 46px #001118aa;overflow:hidden;animation:sheetIn .22s ease-out}.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 13px;border-bottom:1px solid #ffffff16}.sheet-head small{font-size:9px;letter-spacing:.15em;color:#7ce0dc}.sheet-head h2{margin:2px 0 0;font-size:24px}.close-btn{width:38px;height:38px;border:1px solid #ffffff20;border-radius:50%;background:#ffffff0d;font-size:25px}.sheet-body{padding:8px 10px 14px;max-height:55vh;overflow:auto}.more-row{width:100%;border:0;border-bottom:1px solid #ffffff12;background:transparent;padding:16px 12px;display:flex;justify-content:space-between;text-align:left;font-weight:650}.more-row b{color:#78e5df}.info-page{padding:5px 8px 15px;color:#d9eaec;line-height:1.55;font-size:13px}.info-page h3{color:#fff;font-size:18px;margin:8px 0}.back-more{border:0;background:#ffffff0e;border-radius:14px;padding:8px 12px;margin-bottom:8px;color:#83e7e2}@keyframes sheetIn{from{transform:translateY(35px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:650px){.app-shell{border-radius:24px}.more-sheet{left:22px;right:22px;bottom:18px}}
@media (max-height:690px){.bottom-nav{height:120px;transform-origin:bottom center}.screen{bottom:120px}.countdown-dome{transform:translateX(-50%) scale(.90);transform-origin:top center}.place-chip{top:130px}.date-card{height:62px;bottom:10px}.prayer-grid{grid-auto-rows:60px;gap:3px 10px;transform:translateY(-7px)}.prayer-card{border-radius:20px}.prayer-icon-wrap,.prayer-icon{width:37px;height:37px}.prayer-time{font-size:14px}.prayer-name{font-size:12.5px}.nav-dock-art{transform:scaleY(.878);transform-origin:bottom center}.nav-item .nav-icon{top:52px}.center-nav .nav-icon{top:48px}.nav-item>span{top:84px}.center-nav>span{top:87px}.nav-item .active-underline{top:103px}}
.nav-center-bubble{position:absolute;z-index:1;top:42px;left:50%;transform:translateX(-50%);width:58px;height:58px;border-radius:50%;border:1.65px solid rgba(211,251,252,.933);box-shadow:0 0 9px rgba(84,219,234,.44);pointer-events:none}
.nav-center-bubble:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:linear-gradient(#c6cbcb 0%,#a4aeb0 52%,#70848a 100%);box-shadow:0 2px 6px rgba(0,18,24,.28)}
@media (max-height:690px){.nav-center-bubble{top:37px;width:51px;height:51px}.nav-center-bubble:after{width:42px;height:42px}}


/* v5 locked mobile hero: wider composition, mobile only. Desktop stays on the prior hero until desktop is handled separately. */
@media (max-width:600px){
  .hero-photo:before{display:none}
  .hero-photo:after{background-image:url("assets/hero_mobile_wide.webp");background-position:center center;background-size:cover;background-repeat:no-repeat}
}