: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}.app-shell.home-view{background:#084858}.app-shell.calendar-view{background:#07363f}
.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;transform:translateY(6px)}.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:#084858;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:transparent}.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;transform:translateY(14px);position:relative;z-index:2}.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{position:relative;border:1px solid #78b4bc55;border-radius:15px;background:#124956cc;display:flex;flex-direction:column;align-items:center;justify-content:center}.cal-time-icon{position:absolute;left:7px;top:50%;transform:translateY(-50%);width:28px;height:28px;object-fit:contain}.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;gap:14px;padding:16px 18px 14px;border-bottom:1px solid #ffffff16}.sheet-brand{display:flex;align-items:center;gap:12px;min-width:0}.sheet-logo{width:28px;height:28px;flex:0 0 28px;border-radius:8px;display:block;box-shadow:0 2px 8px rgba(0,0,0,.18)}.sheet-head h2{margin:0;font-size:24px;line-height:1.05}.close-btn{width:42px;height:42px;display:grid;place-items:center;padding:0;border:1px solid #ffffff20;border-radius:50%;background:#ffffff0d;color:#e8f7f8;font-size:30px;line-height:1;cursor:pointer}.sheet-body{padding:8px 12px 14px;max-height:55vh;overflow:auto}.more-row{width:100%;border:0;border-bottom:1px solid #ffffff12;background:transparent;padding:18px 14px;display:flex;align-items:center;justify-content:space-between;text-align:left;font-weight:650;font-size:16px;color:#eef8f9}.more-row b{color:#78e5df;font-size:22px;font-weight:500;line-height:1}.info-page{padding:6px 10px 18px;color:#d9eaec;line-height:1.58;font-size:13px}.info-page h3{color:#fff;font-size:19px;margin:8px 0 12px}.info-page h4{color:#eefafa;font-size:14px;margin:17px 0 5px}.info-page p{margin:0 0 12px}.info-page strong{color:#f5fbfb;font-weight:700}.info-email{color:#83e7e2;text-decoration:none;font-weight:700;overflow-wrap:anywhere}.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}
}

/* v7 mobile Home hero — match the frozen app composition exactly: original app-reference image, edge-to-edge cover, centered mosque. */
@media (max-width:600px){
  .hero-photo:before{display:none}
  .hero-photo:after{
    background-image:url("assets/hero_mosque_bg.webp");
    background-position:center 46%;
    background-size:cover;
    background-repeat:no-repeat;
  }
}

/* v8 mobile Home geometry — mirror the frozen Android v2.08 content architecture.
   Android keeps the Home content full-height, reserves only a small bottom content
   pad, and overlays the footer on that pad.  Previous web builds removed the whole
   footer height from Home, which made the hero too short and pushed the footer into
   the third prayer row. */
@media (max-width:600px){
  #homeScreen{
    inset:0;
    bottom:0;
  }

  /* Footer is intentionally still the previously locked 136px web height.
     70px is the proportional equivalent of Android's protected 76dp content pad
     after the agreed ~8–10% footer-height reduction. */
  #homeScreen .home-stage{
    inset:auto 0 auto 0;
    top:0;
    height:calc((100% - 70px) * .665);
  }
  #homeScreen .prayer-region{
    top:calc((100% - 70px) * .665);
    bottom:auto;
    height:calc((100% - 70px) * .335);
    padding:0 16px 2px;
    /* One continuous Android-style prayer-section surface; no intermediate bands. */
    background:linear-gradient(180deg,
      rgb(8,72,88) 0%,
      rgb(8,72,88) 18%,
      rgb(8,70,86) 40%,
      rgb(7,66,82) 63%,
      rgb(6,61,78) 82%,
      rgb(5,57,75) 100%);
  }

  /* Android cards are 70dp on a full app screen.  In a browser the address bar
     reduces the usable vertical viewport, so scale only the card rows with viewport
     height; on full-screen/PWA height they naturally return to the exact 70px master. */
  #homeScreen .prayer-grid{
    grid-auto-rows:clamp(60px,7.65dvh,70px);
    gap:clamp(3px,.48dvh,4px) 12px;
    transform:translateY(-8px);
  }

  /* Keep the app's 24dp radius language while preventing the shorter browser rows
     from looking inflated. */
  #homeScreen .prayer-card{
    border-radius:clamp(21px,2.65dvh,24px);
  }

  /* The app source anchors the mosque slightly left of geometric center. */
  #homeScreen .hero-photo:after{
    background-position:calc(50% - 8px) 46%;
  }
}

/* v9 responsive mobile Home structure — keep the footer from ever cutting the third prayer row.
   The Home content is split into hero + prayer region inside a viewport-safe content area.
   Prayer rows share the prayer region equally instead of using dvh-based fixed row heights. */
@media (max-width:600px){
  .app-shell{
    max-height:none;
  }

  #homeScreen{
    inset:0;
    bottom:0;
    --home-footer-clearance:108px;
    --home-content-height:calc(100% - var(--home-footer-clearance));
  }

  #homeScreen .home-stage{
    top:0;
    bottom:auto;
    height:calc(var(--home-content-height) * .665);
  }

  #homeScreen .prayer-region{
    top:calc(var(--home-content-height) * .665);
    bottom:auto;
    height:calc(var(--home-content-height) * .335);
    padding:0 16px 0;
    overflow:visible;
    /* v10: one uninterrupted surface from the date strip to the footer curve.
       This removes the two visible shade changes that appeared around the prayer rows. */
    background:#084858;
  }

  #homeScreen .prayer-grid{
    /* Leave a true clear zone below the third row. With the dock curve sitting
       slightly inside the content area, this yields about 20px of visible
       breathing room between Maghrib/Isha and the white footer curve. */
    height:calc(100% - 24px);
    grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(3,minmax(0,1fr));
    grid-auto-rows:unset;
    gap:4px 12px;
    transform:translateY(-8px);
  }

  #homeScreen .prayer-card{
    height:100%;
    min-height:0;
    border-radius:clamp(20px,3.1vh,24px);
  }
}

/* Short-browser-height variant keeps the same structure with a proportionally smaller protected footer zone. */
@media (max-width:600px) and (max-height:690px){
  #homeScreen{
    --home-footer-clearance:94px;
  }
  #homeScreen .prayer-grid{
    height:calc(100% - 24px);
    gap:3px 10px;
    transform:translateY(-7px);
  }
  #homeScreen .prayer-card{
    border-radius:20px;
  }
}

/* v11 — Home background continuity + motif footer fade.
   Targeted mobile-only cleanup requested from v10 screenshots:
   1) hide the hard shade seam directly above the Fajr/Sunrise row by extending the
      prayer-section surface slightly upward behind the date strip/gap;
   2) let the lower-right motif fade naturally before the footer curve instead of
      ending on a hard horizontal cut.  Cards/footer geometry are otherwise unchanged. */
@media (max-width:600px){
  #homeScreen .prayer-region::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-18px;
    height:22px;
    background:#084858;
    z-index:0;
    pointer-events:none;
  }

  #homeScreen .motif-large{
    bottom:-8px;
    -webkit-mask-image:linear-gradient(to bottom,
      #000 0%,
      #000 74%,
      rgba(0,0,0,.86) 82%,
      rgba(0,0,0,.42) 91%,
      transparent 100%);
    mask-image:linear-gradient(to bottom,
      #000 0%,
      #000 74%,
      rgba(0,0,0,.86) 82%,
      rgba(0,0,0,.42) 91%,
      transparent 100%);
  }
}

/* v11 refinement: smooth the hero-to-prayer surface instead of introducing a new hard strip. */
@media (max-width:600px){
  #homeScreen .hero-tint:after{
    height:190px;
    background:linear-gradient(180deg,
      transparent 0%,
      rgba(8,72,88,.24) 34%,
      rgba(8,72,88,.68) 58%,
      #084858 78%,
      #084858 100%);
  }
  #homeScreen .prayer-region::before{
    top:-3px;
    height:5px;
    background:#084858;
  }
}

/* v12 — exact Android v2.08 prayer-surface + lower-right motif treatment.
   Keep all v11 geometry. Only replace the stacked/faded web-only surfaces with the
   protected Home implementation from MainActivity:
   - hero lower blend ends on exactly #084858;
   - prayer region uses the same six-stop Android gridBackdrop gradient;
   - one exact 224x236 Home motif, unmasked, anchored -56px right / -2px bottom;
   - footer naturally covers the motif, just like the Android overlay. */
@media (max-width:600px){
  #homeScreen .hero-tint:after{
    height:154px;
    background:linear-gradient(180deg,
      rgba(12,100,105,0) 0%,
      rgba(12,100,105,.1098) 34%,
      rgba(10,94,102,.3059) 55%,
      rgba(9,86,96,.5569) 74%,
      rgba(8,76,91,.8392) 90%,
      rgb(8,72,88) 100%);
  }

  #homeScreen .prayer-region{
    background:linear-gradient(180deg,
      rgb(8,72,88) 0%,
      rgb(8,72,88) 20%,
      rgb(8,70,86) 40%,
      rgb(7,66,82) 60%,
      rgb(6,61,78) 80%,
      rgb(5,57,75) 100%);
  }

  #homeScreen .prayer-region::before{
    content:none !important;
    display:none !important;
  }

  #homeScreen .motif-large{
    width:224px;
    height:236px;
    right:-56px;
    bottom:-2px;
    -webkit-mask-image:none;
    mask-image:none;
    opacity:1;
  }
}

/* v14 — safe seam fix built on the stable v12 prayer-card geometry.
   IMPORTANT: this does NOT change prayer-grid/card sizing. It only replaces the
   prayer-area paint layer with one continuous underlay that slightly overlaps the
   hero boundary and continues behind the footer. */
@media (max-width:600px){
  #homeScreen .prayer-region{
    /* Keep v12/v9 geometry exactly as-is. */
    background:transparent !important;
    isolation:isolate;
    z-index:4;
  }

  #homeScreen .prayer-region::before{
    content:"" !important;
    display:block !important;
    position:absolute;
    left:0;
    right:0;
    /* 2px overlap removes any browser rounding seam at the hero/prayer handoff
       without moving the prayer cards themselves. */
    top:-2px;
    /* Continue the SAME surface behind the footer so no second band can appear. */
    bottom:calc(0px - var(--home-footer-clearance));
    background:linear-gradient(180deg,
      #084858 0%,
      #084858 20%,
      #084656 40%,
      #074252 60%,
      #063d4e 80%,
      #05394b 100%);
    z-index:0;
    pointer-events:none;
  }

  /* Preserve the original stacking order: background < motif < cards < footer. */
  #homeScreen .motif-large{z-index:1;}
  #homeScreen .prayer-grid{z-index:2;}

  /* Keep the hero handoff color identical to the prayer underlay start. */
  #homeScreen .hero-tint:after{
    background:linear-gradient(180deg,
      rgba(12,100,105,0) 0%,
      rgba(12,100,105,.1098) 34%,
      rgba(10,94,102,.3059) 55%,
      rgba(9,86,96,.5569) 74%,
      rgba(8,76,91,.8392) 90%,
      #084858 100%);
  }
}

/* v15 — single Home prayer-surface underlay.
   Keep the proven v14/v12 card geometry untouched. Remove element-boundary seams
   by painting one solid teal surface on the Home screen itself from the hero/prayer
   handoff all the way to the bottom, behind the footer. */
@media (max-width:600px){
  #homeScreen{
    isolation:isolate;
  }

  #homeScreen::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:calc((var(--home-content-height) * .665) - 3px);
    bottom:0;
    background:#084858;
    z-index:1;
    pointer-events:none;
  }

  /* Hero remains above the shared surface; its lower blend ends on the exact same teal. */
  #homeScreen .home-stage{
    z-index:2;
  }
  #homeScreen .hero-tint:after{
    height:154px;
    background:linear-gradient(180deg,
      rgba(12,100,105,0) 0%,
      rgba(12,100,105,.10) 34%,
      rgba(10,94,102,.28) 55%,
      rgba(9,86,96,.50) 74%,
      rgba(8,76,91,.78) 90%,
      #084858 100%);
  }

  /* Prayer region carries no paint of its own — only cards + motif. */
  #homeScreen .prayer-region{
    background:transparent !important;
    z-index:3;
  }
  #homeScreen .prayer-region::before{
    content:none !important;
    display:none !important;
  }

  /* Preserve the locked stacking and geometry. */
  #homeScreen .motif-large{z-index:1;}
  #homeScreen .prayer-grid{z-index:2;}
}


/* v16 — Home motif alignment + footer breathing room.
   Fixes requested from v15 screenshots:
   1) keep the right-side motif out of the translucent date card / upper band;
   2) let the motif continue into the blank zone above the footer;
   3) increase breathing room between the third prayer row and the footer curve;
   4) keep the same overall v15 layout without changing calendar styling. */
@media (max-width:600px){
  /* Slightly denser date-strip fill so the lower-right ornament does not show through
     the card area the way it was doing on some mobile browsers. */
  #homeScreen .date-card{
    background:linear-gradient(180deg,
      rgba(69,132,138,.94),
      rgba(31,94,113,.95),
      rgba(15,69,91,.96));
  }

  /* Preserve the locked prayer-card sizing feel, but give the footer a little more air. */
  #homeScreen .prayer-grid{
    height:calc(100% - 34px);
  }


}

@media (max-width:600px) and (max-height:690px){
  #homeScreen .prayer-grid{
    height:calc(100% - 30px);
  }
}

@media (max-width:600px){

  /* Re-seat the motif lower so it fills the footer-approach area, while fading its
     upper start so it no longer appears to creep into the date-card zone. */
  #homeScreen .motif-large{
    right:-56px;
    bottom:-18px;
    width:224px;
    height:236px;
    opacity:.98;
    -webkit-mask-image:linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,.06) 8%,
      rgba(0,0,0,.28) 15%,
      rgba(0,0,0,.62) 23%,
      rgba(0,0,0,.9) 30%,
      #000 36%,
      #000 100%);
    mask-image:linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,.06) 8%,
      rgba(0,0,0,.28) 15%,
      rgba(0,0,0,.62) 23%,
      rgba(0,0,0,.9) 30%,
      #000 36%,
      #000 100%);
  }
}

/* v17 — mobile Home polish pass.
   Requested refinements only:
   - slightly reduce prayer-cards-to-footer gap;
   - lighten prayer-card visual weight by reducing icon/text sizes;
   - make lower-right motif end smoothly instead of hard-cutting;
   - reduce countdown dome and Bhatkal pill by ~10–12%.
   All other v16 geometry and behavior remain unchanged. */
@media (max-width:600px){
  /* 1) Bring the third prayer row a little closer to the footer curve without crowding it. */
  #homeScreen .prayer-grid{
    height:calc(100% - 29px);
  }

  /* 2) Make prayer-card content feel lighter while preserving the locked card sizes. */
  #homeScreen .prayer-icon-wrap{
    width:38px;
    height:38px;
    flex-basis:38px;
    margin-left:11px;
    margin-right:7px;
  }
  #homeScreen .prayer-icon{
    width:38px;
    height:38px;
  }
  #homeScreen .prayer-name{
    font-size:13px;
    font-weight:400;
  }
  #homeScreen .prayer-time{
    font-size:15px;
    font-weight:700;
  }

  /* 3) Keep the motif present in the lower blank zone, then fade it gently behind the footer. */
  #homeScreen .motif-large{
    right:-56px;
    bottom:-20px;
    width:224px;
    height:236px;
    opacity:.95;
    -webkit-mask-image:linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,.08) 7%,
      rgba(0,0,0,.34) 15%,
      rgba(0,0,0,.72) 24%,
      #000 34%,
      #000 82%,
      rgba(0,0,0,.86) 89%,
      rgba(0,0,0,.54) 95%,
      transparent 100%);
    mask-image:linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,.08) 7%,
      rgba(0,0,0,.34) 15%,
      rgba(0,0,0,.72) 24%,
      #000 34%,
      #000 82%,
      rgba(0,0,0,.86) 89%,
      rgba(0,0,0,.54) 95%,
      transparent 100%);
  }

  /* 4) Slightly smaller countdown + Bhatkal pill, keeping the same center alignment. */
  #homeScreen .countdown-dome{
    transform:translateX(-50%) scale(.88);
    transform-origin:top center;
  }
  #homeScreen .place-chip{
    top:calc(max(0px,env(safe-area-inset-top)) + 136px);
    width:92px;
    height:27px;
    font-size:13px;
  }
}

@media (max-width:600px) and (max-height:690px){
  #homeScreen .prayer-grid{
    height:calc(100% - 26px);
  }
}

/* v19 — two targeted Home-only corrections on top of v18.
   1) Re-seat only the Bhatkal pill: still slightly above v17, but not as high as v18.
   2) Motif geometry remains extended below the footer; the SVG itself now soft-fades
      at its left edge so the ornament no longer reads as a rectangular block. */
@media (max-width:600px){
  #homeScreen .place-chip{
    top:calc(max(0px,env(safe-area-inset-top)) + 131px);
  }

  #homeScreen .motif-large{
    /* Preserve the exact v17 top/side alignment while revealing the SVG artwork
       that continues below the old 236px viewport. */
    background-image:url("assets/motifs/home_lower_right_motif_soft.png");
    right:-56px;
    bottom:-98px;
    width:224px;
    height:314px;
    opacity:.95;
    -webkit-mask-image:linear-gradient(to bottom,
      transparent 0px,
      rgba(0,0,0,.08) 17px,
      rgba(0,0,0,.34) 35px,
      rgba(0,0,0,.72) 57px,
      #000 80px,
      #000 250px,
      rgba(0,0,0,.88) 270px,
      rgba(0,0,0,.52) 292px,
      transparent 314px);
    mask-image:linear-gradient(to bottom,
      transparent 0px,
      rgba(0,0,0,.08) 17px,
      rgba(0,0,0,.34) 35px,
      rgba(0,0,0,.72) 57px,
      #000 80px,
      #000 250px,
      rgba(0,0,0,.88) 270px,
      rgba(0,0,0,.52) 292px,
      transparent 314px);
  }
}


/* v20 — Calendar-only Android v2.08 visual match.
   Home v19 is locked and intentionally untouched.
   Mirrors CalendarActivity v2.08 architecture: 72px summary, one flexible calendar card,
   then three 70px prayer rows in two columns using the Home prayer-card visual language. */
@media (max-width:600px){
  #calendarScreen{
    /* Keep the existing protected footer clearance. */
    inset:0 0 136px;
    overflow:hidden;
    background:#07363f;
  }

  #calendarScreen .calendar-wrap{
    position:relative;
    height:100%;
    padding:max(8px,env(safe-area-inset-top)) 18px 2px;
    background:linear-gradient(180deg,#0d535b 0%,#07363f 100%);
    display:flex;
    flex-direction:column;
    gap:0;
    isolation:isolate;
  }

  /* Calendar motifs removed as requested. */
  #calendarScreen .calendar-wrap::before,
  #calendarScreen .calendar-wrap::after{
    content:none;
    background:none;
  }


  #calendarScreen .calendar-summary,
  #calendarScreen .calendar-card,
  #calendarScreen .calendar-times{
    position:relative;
    z-index:1;
  }

  #calendarScreen .calendar-summary{
    flex:0 0 72px;
    height:68px;
    margin:0 0 8px;
    border-radius:22px;
    border:1px solid rgba(124,205,211,.59);
    background:linear-gradient(180deg,#14525b 0%,#0f454f 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:7px 52px;
    box-shadow:0 3px 8px rgba(0,20,28,.16);
  }
  #calendarScreen .calendar-date-main{
    font-size:16.8px;
    line-height:1.12;
    font-weight:750;
    color:#f6fcfc;
    text-align:center;
    white-space:nowrap;
  }
  #calendarScreen .calendar-date-hijri{
    font-size:11.8px;
    line-height:1.15;
    font-weight:400;
    color:#c7e1e2;
    margin-top:2px;
    text-align:center;
    white-space:nowrap;
  }
  #calendarScreen .today-reset{
    right:9px;
    top:50%;
    transform:translateY(-50%);
    width:29px;
    height:29px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.16);
    background:linear-gradient(rgba(91,169,171,.34),rgba(24,96,111,.34));
    display:grid;
    place-items:center;
    padding:0;
    font-size:17px;
    line-height:1;
  }

  #calendarScreen .calendar-card{
    flex:1 1 auto;
    min-height:0;
    display:grid;
    grid-template-rows:40px 25px minmax(0,1fr);
    padding:6px 7px 7px;
    border-radius:22px;
    border:1px solid rgba(147,213,217,.53);
    background:linear-gradient(180deg,#164e57 0%,#0f414b 100%);
    box-shadow:0 2px 7px rgba(0,20,28,.14);
    overflow:hidden;
  }

  #calendarScreen .month-bar{
    display:grid;
    grid-template-columns:40px minmax(0,1fr) 40px;
    align-items:center;
    padding:0;
    transform:none;
    position:relative;
    z-index:2;
  }
  #calendarScreen .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;
  }
  #calendarScreen .month-bar .chevron{
    width:22px;
    height:22px;
    fill:none;
    stroke:#b8f4f6;
    stroke-width:2.1;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  #calendarScreen .month-bar div{
    text-align:center;
    font-size:17.2px;
    line-height:1;
    font-weight:800;
    color:#f6fcfc;
    white-space:nowrap;
  }

  #calendarScreen .weekday-row{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    height:25px;
    align-items:center;
    text-align:center;
    font-size:9.3px;
    line-height:1;
    font-weight:700;
    color:#9ec4c7;
  }
  #calendarScreen .weekday-row span:nth-child(6){color:#b8f4f6;}

  #calendarScreen .calendar-grid{
    min-height:0;
    display:grid;
    grid-template-columns:repeat(7,1fr);
    grid-template-rows:repeat(6,1fr);
    gap:0;
  }
  #calendarScreen .day-cell{
    border:0;
    background:transparent;
    padding:0 1px;
    display:grid;
    place-items:center;
    color:#f6fcfc;
  }
  #calendarScreen .day-pill{
    width:43px;
    height:41px;
    border:1px solid transparent;
    border-radius:11px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  #calendarScreen .day-pill>span{
    height:21px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    line-height:21px;
    font-weight:400;
  }
  #calendarScreen .day-pill small{
    height:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:8.8px;
    line-height:14px;
    color:#b8f4f6;
  }
  #calendarScreen .day-cell.selected .day-pill{
    background:#49aeb9;
    border-color:#97eef2;
  }
  #calendarScreen .day-cell.selected .day-pill>span{font-weight:800;color:#fff;}
  #calendarScreen .day-cell.selected .day-pill small{color:#e0fbfc;}
  #calendarScreen .day-cell.today:not(.selected) .day-pill{
    background:rgba(98,212,221,.137);
    border-color:rgba(112,222,229,.824);
  }
  #calendarScreen .day-cell.today:not(.selected) .day-pill>span{font-weight:800;color:#fff;}

  /* Exact CalendarActivity v2.08 prayer-card arrangement: Fajr/Sunrise,
     Dhuhr/Asr, Maghrib/Isha. Calendar stays neutral — no active gold card. */
  #calendarScreen .calendar-times{
    flex:0 0 auto;
    margin:7px 0 8px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(3,70px);
    column-gap:12px;
    row-gap:4px;
  }
  #calendarScreen .cal-time{
    position:relative;
    min-width:0;
    height:70px;
    border:1px solid rgba(143,181,189,.46);
    border-radius:24px;
    background:linear-gradient(180deg,#296374 0%,#14475a 54%,#0a3247 100%);
    box-shadow:inset 0 1px rgba(143,218,220,.07),0 2px 6px rgba(0,30,43,.19);
    display:grid;
    grid-template-columns:50px minmax(0,1fr);
    grid-template-rows:1fr 1fr;
    align-items:center;
    padding:4px 8px 4px 11px;
    overflow:hidden;
  }
  #calendarScreen .cal-time-icon{
    position:static;
    grid-column:1;
    grid-row:1 / 3;
    transform:none;
    width:42px;
    height:42px;
    object-fit:contain;
    align-self:center;
    justify-self:start;
  }
  #calendarScreen .cal-time b{
    grid-column:2;
    grid-row:1;
    align-self:end;
    min-width:0;
    font-size:14px;
    line-height:1.05;
    font-weight:400;
    color:#fff;
    white-space:nowrap;
  }
  #calendarScreen .cal-time span{
    grid-column:2;
    grid-row:2;
    align-self:start;
    min-width:0;
    margin-top:2px;
    font-size:16px;
    line-height:1.05;
    font-weight:750;
    color:#fff;
    white-space:nowrap;
  }
}

/* Android Calendar compresses modestly on short displays rather than scrolling. */
@media (max-width:600px) and (max-height:760px){
  #calendarScreen{inset:0 0 120px;}
  #calendarScreen .calendar-wrap{padding:max(7px,env(safe-area-inset-top)) 16px 2px;}
  #calendarScreen .calendar-summary{flex-basis:62px;height:62px;margin-bottom:6px;padding:6px 46px;}
  #calendarScreen .calendar-date-main{font-size:15px;}
  #calendarScreen .calendar-date-hijri{font-size:10.4px;}
  #calendarScreen .calendar-card{grid-template-rows:36px 22px minmax(0,1fr);padding:5px 6px 6px;}
  #calendarScreen .month-bar button{width:35px;height:34px;}
  #calendarScreen .month-bar div{font-size:15.6px;}
  #calendarScreen .weekday-row{height:22px;font-size:8.6px;}
  #calendarScreen .day-pill{width:38px;height:36px;}
  #calendarScreen .day-pill>span{font-size:13.5px;height:19px;line-height:19px;}
  #calendarScreen .day-pill small{font-size:8px;height:12px;line-height:12px;}
  #calendarScreen .calendar-times{margin:6px 0 6px;grid-template-rows:repeat(3,60px);column-gap:10px;row-gap:3px;}
  #calendarScreen .cal-time{height:60px;border-radius:20px;grid-template-columns:44px minmax(0,1fr);padding:3px 7px 3px 9px;}
  #calendarScreen .cal-time-icon{width:37px;height:37px;}
  #calendarScreen .cal-time b{font-size:12.5px;}
  #calendarScreen .cal-time span{font-size:14px;}
}

/* v31 — Dedicated Desktop Home.
   Mobile Home / Mobile Calendar / More content remain locked.
   Desktop order: countdown + Bhatkal → wide mosque hero → dates → six prayer cards in one row → compact footer. */
@media (min-width:901px), (hover:hover) and (pointer:fine){
  html,body{overflow:hidden;background:#042934}
  body{display:grid;place-items:center;background:radial-gradient(circle at 50% -10%,#0a5864 0,#063844 45%,#031e27 100%)}

  .app-shell.home-view{
    width:100vw;
    max-width:none;
    height:100vh;
    max-height:none;
    border-radius:0;
    background:#084858;
    box-shadow:0 0 60px rgba(0,12,18,.45);
  }

  .app-shell.home-view #homeScreen{
    inset:0;
    display:block;
    overflow:hidden;
  }
.app-shell.home-view #homeScreen::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:340px;
    pointer-events:none;
    z-index:2;
    background:linear-gradient(180deg,rgba(8,72,88,0) 0%,rgba(8,72,88,.12) 18%,rgba(8,72,88,.26) 38%,rgba(8,72,88,.46) 64%,rgba(8,72,88,.66) 84%,rgba(8,72,88,.84) 100%);
  }

  /* HERO */
  .app-shell.home-view #homeScreen .home-stage{
    position:absolute;
    z-index:0;
    left:0;right:0;top:0;
    height:100%;
    overflow:hidden;
    background:#063c48;
  }
  .app-shell.home-view #homeScreen .hero-photo{inset:0;background:#073d49}
  .app-shell.home-view #homeScreen .hero-photo:before{display:none}
  .app-shell.home-view #homeScreen .hero-photo:after{
    content:"";
    position:absolute;
    inset:0;
    background-image:url("assets/hero_desktop.webp");
    background-size:cover;
    background-position:center 46%;
    background-repeat:no-repeat;
  }
  .app-shell.home-view #homeScreen .hero-tint{
    inset:0;
    background:
      linear-gradient(180deg,rgba(2,31,38,.02) 0%,rgba(3,43,50,0) 34%,rgba(5,58,69,.03) 56%,rgba(8,72,88,.10) 76%,rgba(8,72,88,.22) 100%);
  }
  .app-shell.home-view #homeScreen .hero-tint:after{
    left:0;right:0;bottom:0;height:210px;
    background:linear-gradient(180deg,rgba(8,72,88,0) 0%,rgba(8,72,88,.04) 24%,rgba(8,72,88,.12) 56%,rgba(8,72,88,.22) 100%);
  }

  /* COUNTDOWN + LOCATION */
  .app-shell.home-view #homeScreen .countdown-dome{
    top:28px;
    width:302px;
    height:165px;
    border-radius:160px 160px 19px 19px;
    border-color:rgba(121,241,236,.88);
    box-shadow:0 12px 28px rgba(0,19,27,.52),inset 0 1px 0 rgba(143,250,245,.18);
  }
  .app-shell.home-view #homeScreen .countdown-copy{
    padding:22px 34px 0;
    transform:translateY(8px);
  }
  .app-shell.home-view #homeScreen .count-caption{font-size:11px}
  .app-shell.home-view #homeScreen .count-prayer{font-size:20px;margin-top:5px}
  .app-shell.home-view #homeScreen .count-time{font-size:36px;margin-top:5px}
  .app-shell.home-view #homeScreen .place-chip{
    top:197px;
    width:126px;
    height:36px;
    font-size:16px;
  }
  .app-shell.home-view #homeScreen .share-btn{
    top:28px;
    right:34px;
    width:46px;height:46px;
  }

  /* DATES */
  .app-shell.home-view #homeScreen .date-card{
    z-index:4;
    left:50%;right:auto;
    bottom:206px;
    transform:translateX(-50%);
    width:740px;
    height:72px;
    grid-template-columns:50px minmax(0,1fr) 1px minmax(0,1.08fr) 50px;
    padding:5px 10px;
    border-radius:36px;
    background:linear-gradient(180deg,rgba(53,125,132,.92),rgba(24,86,104,.94),rgba(12,61,80,.96));
    box-shadow:0 12px 25px rgba(0,23,32,.42);
  }
  .app-shell.home-view #homeScreen .date-arrow{width:38px;height:38px}
  .app-shell.home-view #homeScreen .date-arrow .chevron{width:21px;height:21px}
  .app-shell.home-view #homeScreen .date-big{width:52px;flex-basis:52px;font-size:25px}
  .app-shell.home-view #homeScreen .date-copy b{font-size:12.5px;font-weight:650}
  .app-shell.home-view #homeScreen .date-copy small{font-size:12px;margin-top:2px}
  .app-shell.home-view #homeScreen .date-divider{height:48px}
  .app-shell.home-view #homeScreen .today-home-reset{bottom:286px;width:34px;height:34px}

  /* ONE-LINE PRAYER CARDS */
  .app-shell.home-view #homeScreen .prayer-region{
    position:absolute;
    z-index:3;
    left:0;right:0;
    top:auto;
    bottom:74px;
    height:128px;
    padding:10px 24px 8px;
    background:transparent;
    overflow:hidden;
  }
  .app-shell.home-view #homeScreen .prayer-region::before{display:none}
  .app-shell.home-view #homeScreen .prayer-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    grid-auto-rows:96px;
    gap:12px;
    transform:none;
    max-width:1520px;
    margin:0 auto;
  }
  .app-shell.home-view #homeScreen .prayer-card{
    height:96px;
    border-radius:25px;
    padding-right:10px;
  }
  .app-shell.home-view #homeScreen .prayer-icon-wrap{
    width:46px;height:46px;flex-basis:46px;
    margin-left:14px;margin-right:9px;
  }
  .app-shell.home-view #homeScreen .prayer-icon{width:46px;height:46px}
  .app-shell.home-view #homeScreen .prayer-name{font-size:14px}
  .app-shell.home-view #homeScreen .prayer-time{font-size:18px;margin-top:4px}
  .app-shell.home-view #homeScreen .motif-large{display:none}

  /* COMPACT DESKTOP FOOTER */
  .app-shell.home-view .bottom-nav{
    z-index:5;
    left:50%;right:auto;
    bottom:18px;
    width:500px;
    height:60px;
    transform:translateX(-50%);
    display:grid;
    grid-template-columns:repeat(3,1fr);
    padding:0;
    border:1px solid rgba(147,211,216,.32);
    border-radius:32px;
    background:linear-gradient(180deg,rgba(11,61,72,.94),rgba(5,43,53,.98));
    box-shadow:0 16px 34px rgba(0,18,25,.38);
    overflow:hidden;
  }
  .app-shell.home-view .nav-dock-art,
  .app-shell.home-view .nav-center-bubble,
  .app-shell.home-view .nav-item:before,
  .app-shell.home-view .active-underline{display:none!important}
  .app-shell.home-view .nav-item{
    height:100%;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:13px;
    color:#bfcfd2;
    text-shadow:none;
  }
  .app-shell.home-view .nav-item .nav-icon,
  .app-shell.home-view .center-nav .nav-icon{
    position:static;
    transform:none;
    width:23px!important;
    height:23px!important;
    margin:0;
    color:currentColor;
    stroke:currentColor;
  }
  .app-shell.home-view .nav-item>span,
  .app-shell.home-view .center-nav>span{
    position:static;
    height:auto;
    display:block;
    margin:0;
  }
  .app-shell.home-view .nav-item.active,
  .app-shell.home-view .bottom-nav.more-active #moreNav{
    color:#fff;
    font-size:13.5px;
    font-weight:750;
  }
  .app-shell.home-view .nav-item.active{
    background:rgba(65,157,170,.24);
    border-radius:0 28px 28px 0;
  }
  .app-shell.home-view .bottom-nav.more-active #moreNav{
    border-radius:28px 0 0 28px;
  }

  /* Desktop More stays centered and controlled; content remains the locked v29 copy. */
  .app-shell.home-view .more-sheet{
    left:50%;right:auto;
    width:520px;
    bottom:24px;
    transform:translateX(-50%);
    max-height:76%;
  }
  @keyframes sheetInDesktop{
    from{transform:translate(-50%,35px);opacity:0}
    to{transform:translate(-50%,0);opacity:1}
  }
  .app-shell.home-view .more-sheet{animation:sheetInDesktop .22s ease-out}
}

/* v55 — Desktop Home fit-to-screen zoom compensation.
   A desktop browser gets one fixed 1700×810 design canvas. JavaScript scales the
   whole canvas to the current CSS viewport, so browser zoom (including 500%+)
   changes the viewport size but not the visual composition. Phones keep the
   existing locked mobile layout because this class is only enabled on desktop. */
body.desktop-fit-home{
  display:block!important;
  width:100vw!important;
  height:100vh!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  background:#042934!important;
}
body.desktop-fit-home .app-shell.home-view{
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  width:1700px!important;
  min-width:1700px!important;
  max-width:1700px!important;
  height:810px!important;
  min-height:810px!important;
  max-height:810px!important;
  margin:0!important;
  transform:translate(-50%,-50%) scale(var(--desktop-fit-scale,1))!important;
  transform-origin:center center!important;
  overflow:hidden!important;
}
body.desktop-fit-home .app-shell.home-view #homeScreen .date-card{
  width:740px!important;
}

/* v56 — isolate Desktop Fit Home from mobile breakpoint leakage.
   At extreme browser zoom the CSS viewport can drop below 600px even on a real
   desktop. The mobile Home media rules then become eligible and were painting the
   mobile teal underlay / mobile grid geometry on top of the fixed desktop canvas.
   These resets apply ONLY while JS has positively enabled desktop-fit-home, so the
   locked real-phone Home remains untouched. */
body.desktop-fit-home .app-shell.home-view #homeScreen::before{
  content:none!important;
  display:none!important;
  background:none!important;
}
body.desktop-fit-home .app-shell.home-view #homeScreen{
  --home-footer-clearance:0px!important;
  --home-content-height:100%!important;
}
body.desktop-fit-home .app-shell.home-view #homeScreen .home-stage{
  inset:0!important;
  top:0!important;
  bottom:auto!important;
  height:100%!important;
  z-index:0!important;
}
body.desktop-fit-home .app-shell.home-view #homeScreen .hero-photo:before{
  display:none!important;
}
body.desktop-fit-home .app-shell.home-view #homeScreen .hero-photo:after{
  background-image:url("assets/hero_desktop.webp")!important;
  background-size:cover!important;
  background-position:center 46%!important;
  background-repeat:no-repeat!important;
}
body.desktop-fit-home .app-shell.home-view #homeScreen .countdown-dome{
  top:28px!important;
  width:302px!important;
  height:165px!important;
  transform:translateX(-50%)!important;
  transform-origin:top center!important;
}
body.desktop-fit-home .app-shell.home-view #homeScreen .place-chip{
  top:197px!important;
  width:126px!important;
  height:36px!important;
  font-size:16px!important;
}
body.desktop-fit-home .app-shell.home-view #homeScreen .date-card{
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  left:50%!important;
  right:auto!important;
  bottom:206px!important;
  width:740px!important;
  height:72px!important;
  transform:translateX(-50%)!important;
  grid-template-columns:50px minmax(0,1fr) 1px minmax(0,1.08fr) 50px!important;
}
body.desktop-fit-home .app-shell.home-view #homeScreen .today-home-reset{
  bottom:286px!important;
}
body.desktop-fit-home .app-shell.home-view #homeScreen .prayer-region{
  left:0!important;
  right:0!important;
  top:auto!important;
  bottom:74px!important;
  height:128px!important;
  padding:10px 24px 8px!important;
  background:transparent!important;
  overflow:hidden!important;
  isolation:auto!important;
  z-index:3!important;
}
body.desktop-fit-home .app-shell.home-view #homeScreen .prayer-region::before{
  content:none!important;
  display:none!important;
}
body.desktop-fit-home .app-shell.home-view #homeScreen .prayer-grid{
  height:auto!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  grid-template-rows:none!important;
  grid-auto-rows:96px!important;
  gap:12px!important;
  transform:none!important;
  max-width:1520px!important;
  margin:0 auto!important;
}
body.desktop-fit-home .app-shell.home-view #homeScreen .prayer-card{
  height:96px!important;
  min-height:96px!important;
  border-radius:25px!important;
}
body.desktop-fit-home .app-shell.home-view #homeScreen .motif-large{
  display:none!important;
}
body.desktop-fit-home .app-shell.home-view .bottom-nav{
  bottom:18px!important;
  width:500px!important;
  height:60px!important;
  padding:0!important;
  transform:translateX(-50%)!important;
}

/* v57 — Dedicated Desktop Calendar.
   Mobile Calendar v27 remains untouched. Desktop uses the same 1700×810 fitted
   canvas language as the approved Home: selected date → large month → six times → compact nav. */
body.desktop-fit-calendar{
  display:block!important;
  width:100vw!important;
  height:100vh!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  background:#042934!important;
}
body.desktop-fit-calendar .app-shell.calendar-view{
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  width:1700px!important;
  min-width:1700px!important;
  max-width:1700px!important;
  height:810px!important;
  min-height:810px!important;
  max-height:810px!important;
  margin:0!important;
  transform:translate(-50%,-50%) scale(var(--desktop-fit-scale,1))!important;
  transform-origin:center center!important;
  overflow:hidden!important;
  border-radius:0!important;
  background:#073b46!important;
  box-shadow:0 0 60px rgba(0,12,18,.45)!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen{
  display:block!important;
  inset:0!important;
  overflow:hidden!important;
  background:#073b46!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .calendar-wrap{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  padding:26px 44px 95px!important;
  display:grid!important;
  grid-template-rows:72px minmax(0,1fr) 96px!important;
  gap:14px!important;
  isolation:isolate!important;
  background:
    radial-gradient(circle at 50% -18%,rgba(45,136,145,.30) 0%,rgba(22,91,101,.12) 28%,rgba(7,59,70,0) 50%),
    linear-gradient(180deg,#0c5962 0%,#084651 48%,#063744 100%)!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .calendar-wrap::before,
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .calendar-wrap::after{
  content:none!important;
  display:none!important;
}

/* Selected date pill */
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .calendar-summary{
  position:relative!important;
  z-index:2!important;
  justify-self:center!important;
  align-self:start!important;
  width:760px!important;
  height:72px!important;
  min-height:72px!important;
  margin:0!important;
  padding:8px 62px!important;
  border-radius:36px!important;
  border:1px solid rgba(151,224,228,.52)!important;
  background:linear-gradient(180deg,rgba(43,118,126,.96),rgba(20,78,91,.97),rgba(11,59,73,.98))!important;
  box-shadow:0 12px 28px rgba(0,21,29,.30),inset 0 1px rgba(213,255,255,.09)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .calendar-date-main{
  font-size:18px!important;
  line-height:1.12!important;
  font-weight:750!important;
  color:#f7ffff!important;
  text-align:center!important;
  white-space:nowrap!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .calendar-date-hijri{
  margin-top:4px!important;
  font-size:12.5px!important;
  line-height:1.1!important;
  font-weight:400!important;
  color:#cbe5e7!important;
  text-align:center!important;
  white-space:nowrap!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .today-reset{
  position:absolute!important;
  right:16px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:38px!important;
  height:38px!important;
  padding:0!important;
  border-radius:50%!important;
  border:1px solid rgba(226,255,255,.25)!important;
  background:rgba(255,255,255,.09)!important;
  color:#f3ffff!important;
  display:grid!important;
  place-items:center!important;
  font-size:20px!important;
  line-height:1!important;
  box-shadow:inset 0 1px rgba(255,255,255,.05)!important;
}

/* Main calendar */
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .calendar-card{
  position:relative!important;
  z-index:1!important;
  justify-self:center!important;
  align-self:stretch!important;
  width:1080px!important;
  height:auto!important;
  min-height:0!important;
  padding:12px 24px 18px!important;
  display:grid!important;
  grid-template-rows:54px 32px minmax(0,1fr)!important;
  border-radius:30px!important;
  border:1px solid rgba(151,213,217,.52)!important;
  background:linear-gradient(180deg,rgba(21,81,90,.96) 0%,rgba(12,61,72,.97) 100%)!important;
  box-shadow:0 18px 42px rgba(0,21,29,.28),inset 0 1px rgba(214,255,255,.06)!important;
  overflow:hidden!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .month-bar{
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr) 54px!important;
  align-items:center!important;
  padding:0!important;
  transform:none!important;
  position:relative!important;
  z-index:2!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .month-bar button{
  width:42px!important;
  height:42px!important;
  padding:0!important;
  border:1px solid rgba(186,244,246,.12)!important;
  background:rgba(106,216,224,.10)!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  justify-self:center!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .month-bar .chevron{
  width:23px!important;
  height:23px!important;
  fill:none!important;
  stroke:#bff4f6!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .month-bar div{
  text-align:center!important;
  font-size:22px!important;
  line-height:1!important;
  font-weight:800!important;
  color:#f7ffff!important;
  white-space:nowrap!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .weekday-row{
  display:grid!important;
  grid-template-columns:repeat(7,1fr)!important;
  height:32px!important;
  align-items:center!important;
  text-align:center!important;
  font-size:11.5px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:.025em!important;
  color:#9fc8cb!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .weekday-row span:nth-child(6){color:#b8f4f6!important}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .calendar-grid{
  min-height:0!important;
  display:grid!important;
  grid-template-columns:repeat(7,1fr)!important;
  grid-template-rows:repeat(6,1fr)!important;
  gap:2px 6px!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .day-cell{
  border:0!important;
  background:transparent!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  color:#f7ffff!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .day-pill{
  width:68px!important;
  height:50px!important;
  border:1px solid transparent!important;
  border-radius:14px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  transition:background .15s ease,border-color .15s ease!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .day-pill>span{
  height:25px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:17px!important;
  line-height:25px!important;
  font-weight:450!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .day-pill small{
  height:15px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:9.5px!important;
  line-height:15px!important;
  color:#b8f4f6!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .day-cell:not(.selected):not(.other):hover .day-pill{
  background:rgba(83,183,192,.12)!important;
  border-color:rgba(123,222,228,.24)!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .day-cell.selected .day-pill{
  background:linear-gradient(180deg,#58b8c1,#3f9eaa)!important;
  border-color:#a9f4f6!important;
  box-shadow:0 5px 14px rgba(0,30,37,.20)!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .day-cell.selected .day-pill>span{
  font-weight:800!important;
  color:#fff!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .day-cell.selected .day-pill small{color:#edffff!important}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .day-cell.today:not(.selected) .day-pill{
  background:rgba(98,212,221,.11)!important;
  border-color:rgba(112,222,229,.72)!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .day-cell.today:not(.selected) .day-pill>span{
  font-weight:800!important;
  color:#fff!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .day-cell.other{opacity:.22!important}

/* Six selected-date prayer timings in one desktop row. */
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .calendar-times{
  position:relative!important;
  z-index:2!important;
  align-self:end!important;
  justify-self:center!important;
  width:1520px!important;
  height:96px!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  grid-template-rows:96px!important;
  gap:12px!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .cal-time{
  position:relative!important;
  min-width:0!important;
  width:auto!important;
  height:96px!important;
  border:1px solid rgba(143,181,189,.46)!important;
  border-radius:25px!important;
  background:linear-gradient(180deg,#296374 0%,#14475a 54%,#0a3247 100%)!important;
  box-shadow:inset 0 1px rgba(143,218,220,.07),0 2px 8px rgba(0,30,43,.20)!important;
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  grid-template-rows:1fr 1fr!important;
  align-items:center!important;
  justify-content:initial!important;
  padding:8px 12px 8px 14px!important;
  overflow:hidden!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .cal-time-icon{
  position:static!important;
  grid-column:1!important;
  grid-row:1 / 3!important;
  transform:none!important;
  width:46px!important;
  height:46px!important;
  object-fit:contain!important;
  align-self:center!important;
  justify-self:start!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .cal-time b{
  grid-column:2!important;
  grid-row:1!important;
  align-self:end!important;
  min-width:0!important;
  font-size:14px!important;
  line-height:1.05!important;
  font-weight:400!important;
  color:#fff!important;
  white-space:nowrap!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .cal-time span{
  grid-column:2!important;
  grid-row:2!important;
  align-self:start!important;
  min-width:0!important;
  margin-top:4px!important;
  font-size:18px!important;
  line-height:1.05!important;
  font-weight:750!important;
  color:#fff!important;
  white-space:nowrap!important;
}

/* Calendar desktop footer — same approved dock proportions as Home. */
body.desktop-fit-calendar .app-shell.calendar-view .bottom-nav{
  position:absolute!important;
  z-index:20!important;
  left:50%!important;
  right:auto!important;
  bottom:18px!important;
  width:500px!important;
  height:60px!important;
  transform:translateX(-50%)!important;
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  padding:0!important;
  border:1px solid rgba(147,211,216,.32)!important;
  border-radius:32px!important;
  background:linear-gradient(180deg,rgba(11,61,72,.94),rgba(5,43,53,.98))!important;
  box-shadow:0 16px 34px rgba(0,18,25,.38)!important;
  overflow:hidden!important;
}
body.desktop-fit-calendar .app-shell.calendar-view .nav-dock-art,
body.desktop-fit-calendar .app-shell.calendar-view .nav-center-bubble,
body.desktop-fit-calendar .app-shell.calendar-view .nav-item:before,
body.desktop-fit-calendar .app-shell.calendar-view .active-underline{display:none!important}
body.desktop-fit-calendar .app-shell.calendar-view .nav-item{
  position:relative!important;
  height:100%!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  font-size:13px!important;
  font-weight:400!important;
  color:#bfcfd2!important;
  text-shadow:none!important;
}
body.desktop-fit-calendar .app-shell.calendar-view .nav-item .nav-icon,
body.desktop-fit-calendar .app-shell.calendar-view .center-nav .nav-icon{
  position:static!important;
  top:auto!important;
  left:auto!important;
  transform:none!important;
  width:23px!important;
  height:23px!important;
  margin:0!important;
  color:currentColor!important;
  stroke:currentColor!important;
}
body.desktop-fit-calendar .app-shell.calendar-view .center-nav .cal-dots{
  fill:currentColor!important;
  stroke:none!important;
}
body.desktop-fit-calendar .app-shell.calendar-view .nav-item>span,
body.desktop-fit-calendar .app-shell.calendar-view .center-nav>span{
  position:static!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  height:auto!important;
  display:block!important;
  margin:0!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarNav.active{
  color:#fff!important;
  font-size:13.5px!important;
  font-weight:750!important;
  background:rgba(65,157,170,.24)!important;
  border-radius:28px!important;
}
body.desktop-fit-calendar .app-shell.calendar-view .bottom-nav.more-active .nav-item{
  color:#bfcfd2!important;
  font-size:13px!important;
  font-weight:400!important;
  background:transparent!important;
}
body.desktop-fit-calendar .app-shell.calendar-view .bottom-nav.more-active #moreNav{
  color:#fff!important;
  font-size:13.5px!important;
  font-weight:750!important;
  background:rgba(65,157,170,.24)!important;
  border-radius:28px 0 0 28px!important;
}
body.desktop-fit-calendar .app-shell.calendar-view .more-sheet{
  left:50%!important;
  right:auto!important;
  width:520px!important;
  bottom:24px!important;
  transform:translateX(-50%)!important;
  max-height:76%!important;
}

/* v58 — Desktop Calendar polish only. Mobile Calendar stays locked/unchanged. */
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .calendar-wrap{
  grid-template-rows:68px minmax(0,1fr) 94px!important;
  gap:10px!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .calendar-summary{
  width:720px!important;
  height:68px!important;
  min-height:68px!important;
  padding:7px 58px!important;
  border-radius:34px!important;
  border-color:rgba(166,231,234,.62)!important;
  background:linear-gradient(180deg,rgba(49,128,136,.98),rgba(20,77,90,.98) 58%,rgba(9,53,67,.99))!important;
  box-shadow:0 10px 24px rgba(0,20,28,.27),inset 0 1px rgba(232,255,255,.13)!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .calendar-date-main{
  font-size:19px!important;
  font-weight:800!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .calendar-date-hijri{
  margin-top:3px!important;
  font-size:12px!important;
  color:#d4ecee!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .today-reset{
  width:36px!important;
  height:36px!important;
  right:15px!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .calendar-card{
  width:1040px!important;
  height:490px!important;
  align-self:start!important;
  transform:translateY(10px)!important;
  padding:10px 22px 12px!important;
  grid-template-rows:50px 30px minmax(0,1fr)!important;
  border-radius:28px!important;
  border-color:rgba(158,219,223,.58)!important;
  background:linear-gradient(180deg,rgba(23,86,95,.97) 0%,rgba(11,59,70,.985) 100%)!important;
  box-shadow:0 16px 38px rgba(0,20,28,.25),inset 0 1px rgba(222,255,255,.07)!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .month-bar{
  grid-template-columns:50px minmax(0,1fr) 50px!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .month-bar button{
  width:40px!important;
  height:40px!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .month-bar div{
  font-size:23px!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .weekday-row{
  height:30px!important;
  font-size:11.8px!important;
  letter-spacing:.035em!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .calendar-grid{
  gap:1px 6px!important;
}
/* v59: Desktop calendar always keeps the full six-week grid, even when
   the current month only needs five visible weeks. */
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .calendar-grid{
  grid-template-rows:repeat(6,1fr)!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .calendar-grid[data-weeks="5"] .day-cell:nth-child(n+36){
  display:grid!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .day-pill{
  width:66px!important;
  height:48px!important;
  border-radius:13px!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .day-pill>span{
  height:26px!important;
  font-size:18px!important;
  line-height:26px!important;
  font-weight:500!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .day-pill small{
  height:14px!important;
  font-size:10px!important;
  line-height:14px!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .day-cell.selected .day-pill{
  box-shadow:0 4px 12px rgba(0,30,37,.18)!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .calendar-times{
  height:94px!important;
  grid-template-rows:94px!important;
  gap:12px!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarScreen .cal-time{
  height:94px!important;
  border-radius:24px!important;
}
body.desktop-fit-calendar .app-shell.calendar-view .bottom-nav{
  bottom:22px!important;
  width:490px!important;
  height:56px!important;
  border-radius:30px!important;
  box-shadow:0 13px 28px rgba(0,18,25,.34)!important;
}
body.desktop-fit-calendar .app-shell.calendar-view #calendarNav.active{
  border-radius:26px!important;
}

/* v61 — Desktop More redesign only. Mobile More remains locked/unchanged. */
body.desktop-fit-home .app-shell.home-view .modal-backdrop,
body.desktop-fit-calendar .app-shell.calendar-view .modal-backdrop{
  background:rgba(0,17,22,.58)!important;
  backdrop-filter:blur(7px)!important;
}
body.desktop-fit-home .app-shell.home-view .more-sheet,
body.desktop-fit-calendar .app-shell.calendar-view .more-sheet{
  left:50%!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  width:820px!important;
  min-height:430px!important;
  max-height:650px!important;
  transform:translate(-50%,-50%)!important;
  border-radius:30px!important;
  border:1px solid rgba(157,229,233,.38)!important;
  background:linear-gradient(180deg,rgba(17,74,86,.985),rgba(7,47,59,.992))!important;
  box-shadow:0 28px 80px rgba(0,12,18,.52), inset 0 1px 0 rgba(255,255,255,.05)!important;
  overflow:hidden!important;
  animation:moreSheetDesktopIn .20s ease-out!important;
}
@keyframes moreSheetDesktopIn{
  from{transform:translate(-50%,-47%);opacity:0}
  to{transform:translate(-50%,-50%);opacity:1}
}
body.desktop-fit-home .app-shell.home-view .more-sheet.detail-mode,
body.desktop-fit-calendar .app-shell.calendar-view .more-sheet.detail-mode{
  min-height:0!important;
  height:auto!important;
  max-height:650px!important;
}
body.desktop-fit-home .app-shell.home-view .sheet-head,
body.desktop-fit-calendar .app-shell.calendar-view .sheet-head{
  height:78px!important;
  min-height:78px!important;
  padding:0 24px!important;
  gap:18px!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0))!important;
}
body.desktop-fit-home .app-shell.home-view .sheet-brand,
body.desktop-fit-calendar .app-shell.calendar-view .sheet-brand{
  gap:13px!important;
}
body.desktop-fit-home .app-shell.home-view .sheet-logo,
body.desktop-fit-calendar .app-shell.calendar-view .sheet-logo{
  width:34px!important;
  height:34px!important;
  flex:0 0 34px!important;
  border-radius:10px!important;
}
body.desktop-fit-home .app-shell.home-view .sheet-head h2,
body.desktop-fit-calendar .app-shell.calendar-view .sheet-head h2{
  font-size:25px!important;
  line-height:1!important;
  letter-spacing:-.2px!important;
}
/* Exact geometric centering for X; do not rely on the multiplication sign baseline. */
body.desktop-fit-home .app-shell.home-view .close-btn,
body.desktop-fit-calendar .app-shell.calendar-view .close-btn{
  position:relative!important;
  width:44px!important;
  height:44px!important;
  flex:0 0 44px!important;
  display:block!important;
  padding:0!important;
  font-size:0!important;
  line-height:0!important;
  color:transparent!important;
  border:1px solid rgba(208,246,247,.20)!important;
  background:rgba(255,255,255,.055)!important;
}
body.desktop-fit-home .app-shell.home-view .close-btn::before,
body.desktop-fit-home .app-shell.home-view .close-btn::after,
body.desktop-fit-calendar .app-shell.calendar-view .close-btn::before,
body.desktop-fit-calendar .app-shell.calendar-view .close-btn::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:2px;
  border-radius:2px;
  background:#eaf9fa;
  transform-origin:center;
}
body.desktop-fit-home .app-shell.home-view .close-btn::before,
body.desktop-fit-calendar .app-shell.calendar-view .close-btn::before{
  transform:translate(-50%,-50%) rotate(45deg);
}
body.desktop-fit-home .app-shell.home-view .close-btn::after,
body.desktop-fit-calendar .app-shell.calendar-view .close-btn::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}
body.desktop-fit-home .app-shell.home-view .close-btn:hover,
body.desktop-fit-calendar .app-shell.calendar-view .close-btn:hover{
  background:rgba(255,255,255,.10)!important;
  border-color:rgba(157,229,233,.40)!important;
}
body.desktop-fit-home .app-shell.home-view .sheet-body,
body.desktop-fit-calendar .app-shell.calendar-view .sheet-body{
  padding:22px 24px 24px!important;
  max-height:572px!important;
  overflow:auto!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(128,222,222,.36) transparent;
}
body.desktop-fit-home .app-shell.home-view .desktop-more-grid,
body.desktop-fit-calendar .app-shell.calendar-view .desktop-more-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
body.desktop-fit-home .app-shell.home-view .more-card,
body.desktop-fit-calendar .app-shell.calendar-view .more-card{
  position:relative;
  min-height:138px;
  display:grid;
  grid-template-columns:52px 1fr 24px;
  align-items:center;
  gap:15px;
  width:100%;
  padding:20px 18px;
  border:1px solid rgba(171,231,233,.18);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
  color:#f0f9fa;
  text-align:left;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
body.desktop-fit-home .app-shell.home-view .more-card:hover,
body.desktop-fit-calendar .app-shell.calendar-view .more-card:hover{
  transform:translateY(-2px);
  border-color:rgba(126,226,224,.48);
  background:linear-gradient(180deg,rgba(86,185,190,.12),rgba(255,255,255,.032));
  box-shadow:0 10px 24px rgba(0,23,29,.18),inset 0 1px 0 rgba(255,255,255,.05);
}
body.desktop-fit-home .app-shell.home-view .more-card-icon,
body.desktop-fit-calendar .app-shell.calendar-view .more-card-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  border:1px solid rgba(111,226,224,.25);
  background:rgba(47,153,162,.12);
  color:#80e6e1;
}
body.desktop-fit-home .app-shell.home-view .more-card-icon svg,
body.desktop-fit-calendar .app-shell.calendar-view .more-card-icon svg{
  width:27px;
  height:27px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body.desktop-fit-home .app-shell.home-view .more-card-copy,
body.desktop-fit-calendar .app-shell.calendar-view .more-card-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}
body.desktop-fit-home .app-shell.home-view .more-card-copy strong,
body.desktop-fit-calendar .app-shell.calendar-view .more-card-copy strong{
  font-size:18px;
  line-height:1.1;
  color:#fff;
}
body.desktop-fit-home .app-shell.home-view .more-card-copy small,
body.desktop-fit-calendar .app-shell.calendar-view .more-card-copy small{
  font-size:13px;
  line-height:1.45;
  color:#b9d0d3;
  font-weight:450;
}
body.desktop-fit-home .app-shell.home-view .more-card-arrow,
body.desktop-fit-calendar .app-shell.calendar-view .more-card-arrow{
  justify-self:end;
  color:#80e6e1;
  font-size:28px;
  line-height:1;
  transform:translateY(-1px);
}
body.desktop-fit-home .app-shell.home-view .desktop-info-page,
body.desktop-fit-calendar .app-shell.calendar-view .desktop-info-page{
  padding:0 2px 4px!important;
  font-size:14.5px!important;
  line-height:1.68!important;
  color:#d5e7e9!important;
}
body.desktop-fit-home .app-shell.home-view .desktop-back-more,
body.desktop-fit-calendar .app-shell.calendar-view .desktop-back-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 18px!important;
  padding:9px 13px!important;
  border:1px solid rgba(128,230,225,.20)!important;
  border-radius:12px!important;
  background:rgba(91,190,192,.08)!important;
  color:#8be6e2!important;
  font-size:13px!important;
  font-weight:700!important;
  cursor:pointer;
}
body.desktop-fit-home .app-shell.home-view .desktop-back-more span,
body.desktop-fit-calendar .app-shell.calendar-view .desktop-back-more span{
  font-size:17px;
  line-height:1;
}
body.desktop-fit-home .app-shell.home-view .desktop-info-copy,
body.desktop-fit-calendar .app-shell.calendar-view .desktop-info-copy{
  max-width:740px;
}
body.desktop-fit-home .app-shell.home-view .desktop-info-copy p,
body.desktop-fit-calendar .app-shell.calendar-view .desktop-info-copy p{
  margin:0 0 14px!important;
}
body.desktop-fit-home .app-shell.home-view .desktop-info-copy h4,
body.desktop-fit-calendar .app-shell.calendar-view .desktop-info-copy h4{
  margin:20px 0 7px!important;
  font-size:15px!important;
  color:#f1fbfb!important;
}

/* v63 — Clearly visible, premium section transitions for desktop + mobile.
   Motion only: locked layout, spacing, content and colors remain unchanged. */
.screen.screen-pre-enter{
  opacity:0!important;
}
.screen.page-enter-forward{
  animation:screenEnterForward .40s cubic-bezier(.20,.72,.22,1) both!important;
  will-change:opacity,transform,filter;
}
.screen.page-enter-reverse{
  animation:screenEnterReverse .40s cubic-bezier(.20,.72,.22,1) both!important;
  will-change:opacity,transform,filter;
}
@keyframes screenEnterForward{
  0%{opacity:0;transform:translateX(52px) scale(.988);filter:blur(2px)}
  55%{opacity:1}
  100%{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}
}
@keyframes screenEnterReverse{
  0%{opacity:0;transform:translateX(-52px) scale(.988);filter:blur(2px)}
  55%{opacity:1}
  100%{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}
}

/* Navigation selection now has a noticeable soft settle. */
.nav-item,
.nav-item::before,
.nav-item .nav-icon,
.nav-item>span,
.nav-item .active-underline{
  transition:color .26s ease,background .26s ease,opacity .26s ease,
             transform .26s ease,text-shadow .26s ease,border-color .26s ease;
}
.nav-item.nav-activate .nav-icon{
  animation:navIconSettle .34s cubic-bezier(.20,.72,.22,1);
}
.nav-item.nav-activate>span{
  animation:navLabelSettle .34s cubic-bezier(.20,.72,.22,1);
}
@keyframes navIconSettle{
  0%{opacity:.25;scale:.82;transform:translateX(-50%) translateY(5px)}
  65%{opacity:1;scale:1.05;transform:translateX(-50%) translateY(-1px)}
  100%{opacity:1;scale:1;transform:translateX(-50%) translateY(0)}
}
@keyframes navLabelSettle{
  0%{opacity:.2;transform:translateY(7px)}
  100%{opacity:1;transform:translateY(0)}
}

/* More: visible backdrop fade + panel lift/scale on both open and close. */
.modal-layer[hidden]{display:none!important}
.modal-layer.motion-close{pointer-events:none}
.modal-layer.motion-open .modal-backdrop{
  animation:moreBackdropIn .30s ease-out both!important;
}
.modal-layer.motion-close .modal-backdrop{
  animation:moreBackdropOut .24s ease-in both!important;
}
.modal-layer.motion-open .more-sheet{
  animation:moreSheetMobileIn .34s cubic-bezier(.18,.78,.22,1) both!important;
}
.modal-layer.motion-close .more-sheet{
  animation:moreSheetMobileOut .24s cubic-bezier(.55,.06,.68,.19) both!important;
}
@keyframes moreBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes moreBackdropOut{from{opacity:1}to{opacity:0}}
@keyframes moreSheetMobileIn{
  0%{opacity:0;transform:translateY(38px) scale(.93)}
  70%{opacity:1;transform:translateY(-2px) scale(1.008)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes moreSheetMobileOut{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(26px) scale(.96)}
}

/* Desktop More uses a centered panel; keep its translate(-50%,-50%). */
body.desktop-fit-home .app-shell.home-view .modal-layer.motion-open .more-sheet,
body.desktop-fit-calendar .app-shell.calendar-view .modal-layer.motion-open .more-sheet{
  animation:moreSheetDesktopMotionIn .34s cubic-bezier(.18,.78,.22,1) both!important;
}
body.desktop-fit-home .app-shell.home-view .modal-layer.motion-close .more-sheet,
body.desktop-fit-calendar .app-shell.calendar-view .modal-layer.motion-close .more-sheet{
  animation:moreSheetDesktopMotionOut .24s cubic-bezier(.55,.06,.68,.19) both!important;
}
@keyframes moreSheetDesktopMotionIn{
  0%{opacity:0;transform:translate(-50%,-44%) scale(.92)}
  70%{opacity:1;transform:translate(-50%,-50.5%) scale(1.008)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes moreSheetDesktopMotionOut{
  from{opacity:1;transform:translate(-50%,-50%) scale(1)}
  to{opacity:0;transform:translate(-50%,-46%) scale(.96)}
}

@media (prefers-reduced-motion:reduce){
  .screen.page-enter-forward,.screen.page-enter-reverse,
  .nav-item.nav-activate .nav-icon,.nav-item.nav-activate>span,
  .modal-layer.motion-open .modal-backdrop,.modal-layer.motion-close .modal-backdrop,
  .modal-layer.motion-open .more-sheet,.modal-layer.motion-close .more-sheet{
    animation-duration:.01ms!important;
  }
}