/* Masjidi Modern — TV presentation. All colors follow the mosque's palette.
   The base stylesheet retains slideshow, clock and prayer-state transitions. */
body {
  font-family:Qomra,MasjidiDigits,sans-serif;
  --modern-sky-x: -1.5;
  --modern-weather-x: -2;
  --modern-moon-x: -2;
  --modern-motion-switch: 800ms;
  --modern-motion-ease: cubic-bezier(.4,0,.2,1);
  --modern-unit: 1vmin;
  --modern-unit: min(1vmin, .5625vmax);
  --modern-line: var(--color-subtle);
  --modern-soft: var(--color-background);
  --modern-ink: var(--color-darker_text);
  --modern-accent: var(--color-darker_text);
  padding: calc(2 * var(--modern-unit));
  background: var(--color-background);
  color: var(--modern-ink);
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
}
@supports (color: color-mix(in srgb, black, white)) {
  body {
    --modern-line: color-mix(in srgb, var(--color-text) 16%, var(--color-ui));
    --modern-soft: color-mix(in srgb, var(--color-text) 7%, var(--color-ui));
    --modern-ink: color-mix(in srgb, var(--color-darker_text) 68%, var(--color-text));
  }
  [data-theme="dark"] body {
    --modern-ink: var(--color-text);
  }
}
/* Keep mobile text inflation from changing the fitted TV layout after first paint. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
[dir="ltr"] body { --modern-sky-x:1.5; --modern-weather-x:2; --modern-moon-x:2; }
/* Qomra's Mursala alternates, as enabled by the legacy theme. */
.prayer__name,
.modern-message > .content,
.notification__header,
.campaign-notification__title {
  font-family: 'Qomra', 'MasjidiDigits', sans-serif;
  font-feature-settings: "ss01" 1;
}
*, *::before, *::after { box-sizing: border-box; }
/* Keep the decorative page layer above the body paint and behind every card. */
body { isolation:isolate; }
.prayertimes-wrapper {
  flex-direction: row-reverse;
  padding: 0;
  gap: calc(2 * var(--modern-unit));
  border-radius: 0;
  min-width: 0;
  isolation: isolate;
}
.background, .swiggly-tip, .masjid_logo__shadow, .modern-logo-placeholder { display: none; }
.prayertimes-wrapper > .mwaqeet,
.prayertimes-wrapper > .info {
  border: 1px solid var(--modern-line);
  background: var(--color-ui);
  border-radius: calc(3 * var(--modern-unit));
  box-shadow: 0 calc(1.5 * var(--modern-unit)) calc(4 * var(--modern-unit)) calc(-2 * var(--modern-unit)) rgba(0,0,0,.16);
  min-width: 0;
  min-height: 0;
}
.prayertimes-wrapper > .mwaqeet {
  width: 43%;
  flex: 0 0 43%;
  padding: calc(2.7 * var(--modern-unit));
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: minmax(0,1fr);
  gap: calc(1.6 * var(--modern-unit));
}


.prayertimes-wrapper > .mwaqeet > .prayers {
  padding: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--modern-unit));
  line-height: 1.2;
}
.prayer {
  width: 100%; min-height: 0; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  gap: calc(1 * var(--modern-unit));
  padding: calc(.6 * var(--modern-unit)) calc(4 * var(--modern-unit));
  margin: 0; border: 1px solid transparent;
  border-radius: calc(3 * var(--modern-unit));
  background: var(--modern-soft); color: var(--modern-ink);
}
.prayer__main {
  display: flex; flex-direction: row-reverse; align-items: center;
  width: 100%; min-width: 0; gap: calc(1.5 * var(--modern-unit));
}
.prayer--active {
  flex: 2.15; padding: calc(2 * var(--modern-unit)) calc(4 * var(--modern-unit));
  gap: calc(1.2 * var(--modern-unit));
  border-radius: calc(3 * var(--modern-unit));
  background: var(--modern-accent);
  background-image: linear-gradient(155deg, rgba(255,255,255,.18), transparent 65%);
  color: var(--color-bright_text); border-color: var(--modern-accent);
}
.prayer--active .prayer__main { padding-bottom: calc(.6 * var(--modern-unit)); }

.prayer__name {
  font-size: calc(6.9 * var(--modern-unit));
  font-weight: 700;
  line-height: 1.18;
  height: auto;
  padding: 0;
  align-items: center;
  min-width: 0;
  transform: translateY(.06em);
}
.prayer__time, .prayer__iqama-wait-duration {
  font-size: 7.3vb;
  line-height: 1.1;
  margin: 0;
  padding: 0;
  width: auto;
  min-width: 0;
  white-space: nowrap;
  letter-spacing: calc(-.08 * var(--modern-unit));
  font-variant-numeric: normal;
  font-feature-settings: "ss01" 1;
}
.prayer__time, .prayer__iqama-wait-duration {
  align-items: center;
  transform: translateY(.1em);
}
.prayer__image {
  width: calc(3.3 * var(--modern-unit));
  height: calc(3.3 * var(--modern-unit));
  flex: 0 0 calc(3.3 * var(--modern-unit));
  margin: 0;
  opacity: .8;
}
.prayer__icon {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  width: calc(6.6 * var(--modern-unit)); height: calc(6.6 * var(--modern-unit));
  flex: 0 0 calc(6.6 * var(--modern-unit));
  /* The visible container participates in spacing in stacked layouts. */
  margin-block: 0;
}
.prayer__icon::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: calc(1.4 * var(--modern-unit));
  background: var(--color-text); opacity: .1; pointer-events: none;
}
[data-theme="dark"] .prayer__icon::before { opacity: .14; }
.prayer__icon .prayer__image {
  display: block; height: 100%; width: 100%; max-width: 100%; flex: 0 0 auto;
}
/* Swap the existing active/inactive icon inks without changing their badges. */
.prayertimes-wrapper .prayer__image { color:var(--modern-accent); fill:currentColor; }
.prayertimes-wrapper .prayer--active .prayer__image { color:var(--modern-ink); }
/* Approved artwork carries its own consistent optical scale and spacing. */

.timing-status {
  flex-shrink: 0;
  width: 100%; height: auto; min-height: 0; margin: 0; transform: none;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  padding: calc(.6 * var(--modern-unit)) calc(3 * var(--modern-unit));
  gap: calc(1 * var(--modern-unit)); border-radius: 999px;
  background: var(--color-ui); color: var(--modern-accent); white-space: nowrap;
  line-height: 1.15;
}
.timing-status__span, .timing-status__span--title {
  padding: 0; flex: 0 1 auto; font-size: calc(4.5 * var(--modern-unit)); line-height: 1.4;
  font-feature-settings: "ss01" 0;
}
.timing-status .clock { font-size: calc(7.5 * var(--modern-unit)); line-height: 1.15; transform: translateY(.08em); }
.timing-status .clock__part { font-size: inherit; letter-spacing: calc(-.08 * var(--modern-unit)); }
.prayertimes-wrapper > .info {
  padding: calc(3 * var(--modern-unit));
  overflow: hidden;
  grid-template-columns: calc(18 * var(--modern-unit)) minmax(0,1fr);
  grid-template-rows: 0 calc(14 * var(--modern-unit)) calc(7 * var(--modern-unit)) calc(3 * var(--modern-unit)) calc(5 * var(--modern-unit)) minmax(0,1fr) calc(4 * var(--modern-unit)) calc(18 * var(--modern-unit));
  align-content: stretch;
}
.info::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(26 * var(--modern-unit));
  border-bottom: 1px solid var(--modern-line);
  background: var(--modern-soft);
  background-image: radial-gradient(ellipse at 100% 0, transparent, var(--color-ui));
  z-index: 0;
  pointer-events: none;
}
.info > * { z-index: 1; }

.localtime {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  padding-inline-start: calc(3 * var(--modern-unit));
  align-items: center;
  font-size: calc(16 * var(--modern-unit));
  line-height: 1;
  color: var(--modern-ink);
  letter-spacing: calc(-.5 * var(--modern-unit));
  font-variant-numeric: tabular-nums;
}
.localtime .clock, .localtime .clock__part { font-size: inherit; }
.localtime .clock { line-height: .9; }
.localtime::after { display: none; }
.date {
  grid-column: 2;
  grid-row: 3;
  padding: 0;
  padding-inline-start: calc(3 * var(--modern-unit));
  font-size: calc(4.9 * var(--modern-unit));
  line-height: 1.5;
  white-space: normal;
  color: var(--color-text);
}
.info #masjid_logo {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 100%;
  height: calc(18 * var(--modern-unit));
  max-width: 100%;
  margin: 0;
  padding: calc(1.5 * var(--modern-unit));
  align-self: center;
  background: var(--color-ui);
  border-radius: calc(2 * var(--modern-unit));
  border: 1px solid var(--modern-line);
  object-fit: contain;
}
.sanad, .content, .source { grid-column: 1 / -1; text-align: start; padding: 0; margin: 0; }
.sanad { grid-row: 5; font-size: calc(4.5 * var(--modern-unit)); align-self: center; color: var(--modern-accent); }
.content { grid-row: 6; font-size: calc(6.5 * var(--modern-unit)); line-height: 1.35; align-self: start; padding-top: calc(1 * var(--modern-unit)); color: var(--modern-ink); }
.source { grid-row: 7; font-size: calc(3 * var(--modern-unit)); color: var(--color-text); }
.campaign-notification-slider { grid-row: 8; grid-column: 1 / -1; margin: 0; height: 100%; bottom: auto; position: relative; }
.campaign-notification {
  border: 1px solid var(--modern-line);
  border-radius: calc(1.8 * var(--modern-unit));
  padding: calc(1.5 * var(--modern-unit));
  background: var(--modern-soft);
  box-shadow: none;
  gap: calc(1.6 * var(--modern-unit));
  height: calc(15 * var(--modern-unit));
}
.campaign-notification__icon { width: calc(4 * var(--modern-unit)); height: calc(4 * var(--modern-unit)); margin: 0; }
.campaign-notification__body { flex: 1; min-width: 0; }
.campaign-notification__title { font-size: calc(4 * var(--modern-unit)); line-height: 1.3; }
.campaign-notification__description { font-size: calc(3.5 * var(--modern-unit)); line-height: 1.3; }
.campaign-notification__qr {
 width:calc(11 * var(--modern-unit)); height:calc(11 * var(--modern-unit));
 padding:calc(1 * var(--modern-unit)); border-radius:calc(1.4 * var(--modern-unit));
 background:#fff; flex-shrink:0; align-self:center; margin-block:auto;
 box-shadow:0 calc(.4 * var(--modern-unit)) calc(1.2 * var(--modern-unit)) rgba(0,0,0,.16);
}
#notification {
  grid-row: 5 / -1;
  grid-column: 1 / -1;
  position: relative;
  inset: auto;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--modern-line);
  border-radius: calc(2 * var(--modern-unit));
  box-shadow: none;
  background: var(--color-ui);
  overflow: hidden;
}
.notification__icon {
  --notification-icon-size: calc(6.5 * var(--modern-unit));
  width: var(--notification-icon-size);
  height: var(--notification-icon-size);
  left: auto;
  inset-inline-start: calc(2.5 * var(--modern-unit));
  top: calc(2.3 * var(--modern-unit));
  transform: none;
  border: 0;
  border-radius: calc(1.5 * var(--modern-unit));
  padding: calc(1.5 * var(--modern-unit));
  z-index: 2;
  background: var(--modern-accent);
}
.notification__content, .notification__content--no-qr {
  padding: calc(9 * var(--modern-unit)) calc(3 * var(--modern-unit)) calc(15 * var(--modern-unit));
  font-size: calc(4.5 * var(--modern-unit));
  text-align: start;
  gap: calc(1.4 * var(--modern-unit));
  line-height: 1.5;
}
.notification__content--no-qr { padding-bottom: calc(3 * var(--modern-unit)); }
.notification__header { font-size: 1.5em; line-height: 1.4; color: var(--modern-accent); }
.notification__body { font-size: 1.2em; line-height: 1.3; color: var(--modern-ink); margin: 0; }
.notification__lecture-subject, .notification__lesson-subject, .notification__lesson-author,
.notification__lesson-title, .notification__lecture-author { font-size: 1.12em; line-height: 1.4; }
.notification__lecture-time, .notification__activity-time { font-size: .85em; line-height: 1.5; }
.notification__qr { width: calc(13 * var(--modern-unit)); height: calc(13 * var(--modern-unit)); bottom: calc(1 * var(--modern-unit)); inset-inline-end: calc(3 * var(--modern-unit)); padding: calc(.6 * var(--modern-unit)); border-radius: calc(.8 * var(--modern-unit)); }
.notification__bullets { padding: calc(1.5 * var(--modern-unit)); min-height: calc(4 * var(--modern-unit)); gap: calc(.7 * var(--modern-unit)); }
.notification__bullet { width: calc(.7 * var(--modern-unit)); height: calc(.7 * var(--modern-unit)); opacity: .28; }
.notification__bullet--active { width: calc(2.7 * var(--modern-unit)); opacity: 1; }
.islamic-event { grid-row: 4 / 6; grid-column: 1 / -1; position: relative; justify-self: end; pointer-events: none; }
.islamic-event__icon { width: calc(12 * var(--modern-unit)); height: calc(9 * var(--modern-unit)); }
.splash { background: var(--color-ui); border: max(1.5px,calc(.14 * var(--modern-unit))) solid var(--modern-card-line,var(--modern-line)); border-radius: calc(3 * var(--modern-unit)); }

@media (max-aspect-ratio: 999/1000) {
  body { padding: calc(2 * var(--modern-unit)); }
  .prayertimes-wrapper { padding: 0; gap: calc(2 * var(--modern-unit)); flex-direction: column; }
  .prayertimes-wrapper > .mwaqeet {
    width: 100%;
    flex: 0 0 52%;
    grid-template-rows: minmax(0,1fr);
    padding: calc(3 * var(--modern-unit));
    gap: calc(1.6 * var(--modern-unit));
  }
  .prayertimes-wrapper > .mwaqeet > .prayers { padding: 0; }
  .prayer { padding-inline: calc(4 * var(--modern-unit)); }
  .prayer--active { flex: 2.6; padding: calc(2 * var(--modern-unit)) calc(4 * var(--modern-unit)); }
  .prayer__name { font-size: calc(6.5 * var(--modern-unit)); padding: 0; }
  .prayer__time, .prayer__iqama-wait-duration { font-size: 4.15vb; margin: 0; }
  .prayer__image { width: calc(3.8 * var(--modern-unit)); height: calc(3.8 * var(--modern-unit)); flex-basis: calc(3.8 * var(--modern-unit)); }
  .prayer__icon { width: calc(7.6 * var(--modern-unit)); height: calc(7.6 * var(--modern-unit)); flex-basis: calc(7.6 * var(--modern-unit)); margin-block:0; }
  .timing-status { width: 100%; padding-inline: calc(3 * var(--modern-unit)); font-size: calc(5 * var(--modern-unit)); }
  .timing-status__span, .timing-status__span--title { font-size: calc(4.8 * var(--modern-unit)); padding: 0; }
  .timing-status .clock, .timing-status .clock__part { font-size: calc(8.9 * var(--modern-unit)); }
  .prayertimes-wrapper > .info {
    width: 100%;
    padding: calc(3 * var(--modern-unit));
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: calc(5 * var(--modern-unit)) minmax(0,1fr) calc(5 * var(--modern-unit)) calc(18 * var(--modern-unit)) calc(22 * var(--modern-unit));
    justify-items: stretch;
  }
  .info::before { display: none; }
  .sanad { grid-row: 1; font-size: calc(4.444444 * var(--modern-unit)); }
  .content { grid-row: 2; font-size: calc(5.333333 * var(--modern-unit)); }
  .source { grid-row: 3; font-size: calc(3.555556 * var(--modern-unit)); }
  .campaign-notification-slider { grid-row: 4; position: relative; height: 100%; margin: 0; bottom: auto; }
  .campaign-notification { height: calc(16 * var(--modern-unit)); padding: calc(1.5 * var(--modern-unit)); }
  .campaign-notification__title { font-size: calc(4 * var(--modern-unit)); }
  .campaign-notification__description { font-size: calc(3.5 * var(--modern-unit)); }
  .campaign-notification__qr { width: calc(12 * var(--modern-unit)); height: calc(12 * var(--modern-unit)); }
  #notification { grid-row: 1 / 5; height: 100%; margin: 0; }
  .notification__content { padding-top: calc(10 * var(--modern-unit)); font-size: calc(4.5 * var(--modern-unit)); }
  .notification__header { font-size: 1.3em; }
  .notification__body { font-size: 1em; }
  .info > .portrait__header {
    grid-row: 5;
    grid-column: 1;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: calc(2 * var(--modern-unit)) 0 0;
    grid-template-columns: calc(16 * var(--modern-unit)) minmax(0,1fr);
    grid-template-rows: 1fr;
    border-top: 1px solid var(--modern-line);
    align-self: stretch;
  }
  .info > .portrait__header #masjid_logo { grid-row: 1; width: calc(15 * var(--modern-unit)); height: calc(15 * var(--modern-unit)); max-width: none; max-height: none; margin: 0; }
  .info > .portrait__header .date-time { grid-row: 1; padding-inline-start: calc(3 * var(--modern-unit)); }
  .info > .portrait__header .localtime { font-size: calc(12 * var(--modern-unit)); padding: 0; margin: 0; line-height: 1.1; }
  .info > .portrait__header .localtime .clock, .info > .portrait__header .localtime .clock__part { font-size: inherit; }
  .info > .portrait__header .date { font-size: calc(4.4 * var(--modern-unit)); line-height: 1.4; padding: 0; }
}
/* Content switches share one duration/easing; clock ticks and progress are time signals. */
.notification__content-container { transition:transform var(--modern-motion-switch) var(--modern-motion-ease); }
.notification__content { transition:opacity var(--modern-motion-switch) var(--modern-motion-ease); }
.fade-enter-active,.fade-leave-active { transition:opacity var(--modern-motion-switch) var(--modern-motion-ease); }
.slide-fade-enter-active,.slide-fade-leave-active { transition:transform var(--modern-motion-switch) var(--modern-motion-ease),opacity var(--modern-motion-switch) var(--modern-motion-ease); }
@media (prefers-reduced-motion: reduce) {
  .notification__content-container, .notification__content, .clock__part,
  .fade-enter-active,.fade-leave-active,.slide-fade-enter-active,.slide-fade-leave-active { transition:none; }
}
.notification__content-container {
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
  transform: translateX(calc(-1 * var(--x) + var(--drag-x, 0px)));
}
[dir="rtl"] .notification__content-container {
  transform: translateX(calc(var(--x) + var(--drag-x, 0px)));
}
.notification__content-container--dragging { cursor: grabbing; transition: none; }
.notification__content-container--dragging .notification__content { opacity: 1; transition: none; }
.notification__bullets { padding-block: 0; gap: .92vmin; }
.notification__bullet, .notification__bullet--active {
  display: grid; place-items: center;
  min-width: 0; width: 1.3vmin;
  min-height: 0; height: 1.3vmin;
  padding: 0; border: 0; background: transparent; opacity: 1; cursor: pointer;
}
.notification__bullet::after {
  content: ''; width: 100%; height: 100%;
  border-radius: 999px; background: var(--color-text); opacity: 1;
}
.notification__bullet--active { width: 2vmin; }
.notification__bullet--active::after { background: var(--color-darker_text); }
.notification__bullet:focus-visible { outline: 2px solid var(--modern-accent); outline-offset: 2px; }
.prayertimes-wrapper > .info {
  display: flex; flex-direction: column; gap: calc(2 * var(--modern-unit));
  padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.info::before { display: none; }
.modern-header, .modern-message {
  border: 1px solid var(--modern-line); border-radius: calc(3 * var(--modern-unit));
  background: var(--color-ui); padding: calc(3 * var(--modern-unit)); min-height: 0;
}
.modern-header {
  display: grid; grid-template-columns: calc(18 * var(--modern-unit)) minmax(0,1fr);
  align-items: center; flex: 0 0 auto;
  padding: calc(1 * var(--modern-unit)) calc(2 * var(--modern-unit));
}
.modern-header .date-time {
  grid-column: 2; grid-row: 1; display: flex; flex-direction: column;
  gap: 0; padding-inline-start: calc(3.8 * var(--modern-unit)); padding-top: calc(1.5 * var(--modern-unit)); min-width: 0;
  transform:scale(.95); transform-origin:center;
}
.modern-header .localtime {
  padding: 0; margin: 0; font-size: calc(12 * var(--modern-unit)); line-height: 1.2;
}
.modern-header .localtime .clock { font-size: inherit; line-height: 1.2; }
/* Use the countdown's numeral rhythm for the header clock in every style. */
.prayertimes-wrapper[data-modern-style] .modern-header .localtime,
.prayertimes-wrapper[data-modern-style] .modern-header .localtime :is(.clock,.clock__part) {
 letter-spacing:calc(-.08 * var(--modern-unit));
}
.modern-header .date { padding: 0; margin-top: calc(-3.4 * var(--modern-unit)); line-height: 1.3; font-size: calc(4.3 * var(--modern-unit)); }
.modern-header .date { display:block; max-width:100%; min-width:0; white-space:nowrap; }
.info .modern-header #masjid_logo {
  grid-column: 1; grid-row: 1; width: 100%; height: calc(18 * var(--modern-unit));
  margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0;
}
.modern-message { position: relative; display: flex; flex-direction: column; flex: 1; gap: calc(1 * var(--modern-unit)); overflow: hidden; }
.modern-message > .sanad, .modern-message > .content, .modern-message > .source {
  flex: 0 0 auto; width: 100%; height: auto; padding: 0; margin: 0; align-self: stretch;
}
.modern-message > .source { line-height: 1.4; }
.modern-message > .campaign-notification-slider { flex: 0 0 calc(18 * var(--modern-unit)); height: calc(18 * var(--modern-unit)); margin-top: auto; }
.modern-message--notifications > .sanad, .modern-message--notifications > .content, .modern-message--notifications > .source { display: none; }
.modern-message #notification {
  position: absolute; inset: calc(3 * var(--modern-unit)); width: auto; height: auto;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.modern-message > .islamic-event { position: absolute; inset-inline-start: 0; top: 0; }
@media (max-aspect-ratio: 999/1000) {
  .modern-header { grid-template-columns: calc(15 * var(--modern-unit)) minmax(0,1fr); }
  .modern-header .localtime { font-size: calc(10 * var(--modern-unit)); }
  .modern-header .date { font-size: calc(4.1 * var(--modern-unit)); }
  .info .modern-header #masjid_logo { height: calc(15 * var(--modern-unit)); }
}
.modern-header--weather { grid-template-columns: calc(14 * var(--modern-unit)) minmax(0,1fr) calc(18 * var(--modern-unit)); gap: calc(2 * var(--modern-unit)); }
.modern-header--weather .date-time { padding-inline-start: 0; }
/* Bias clock/date toward the logo, opening a wider optical lane for weather. */
.prayertimes-wrapper[data-modern-style] .modern-header--weather .date-time {
 position:relative;
 inset-inline-start:calc(.1 * var(--modern-unit));
}
.info .modern-header--weather #masjid_logo { height: calc(14 * var(--modern-unit)); }
.city-weather { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: calc(.3 * var(--modern-unit)); text-align: center; line-height: 1.3; color: var(--modern-accent); }
.city-weather__reading { display: flex; flex-direction: column; align-items: center; gap: calc(.3 * var(--modern-unit)); font-size: calc(4.8 * var(--modern-unit)); }
.city-weather__icon { display: block; width: calc(6 * var(--modern-unit)); height: calc(6 * var(--modern-unit)); }
.city-weather__icon svg { display: block; width: 100%; height: 100%; }
/* Each slide gets a bounded text region, separate from the QR footer. */
.notification__content { gap: 0; }
.notification__copy {
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; height: 100%; min-height: 0; flex: 1 1 auto;
  gap: calc(1.2 * var(--modern-unit)); padding-block: calc(1 * var(--modern-unit));
  text-align: start;
}
.notification__copy > * { flex: 0 0 auto; margin: 0; max-width: 100%; overflow-wrap: anywhere; }
.notification__copy > :empty { display: none; }
.notification__copy .notification__header { font-size: 1.3em; line-height: 1.35; white-space: pre-line; }
.notification__copy .notification__body { font-size: 1em; line-height: 1.35; white-space: pre-line; }
.notification__copy .notification__lecture-subject,
.notification__copy .notification__lesson-subject,
.notification__copy .notification__lesson-author,
.notification__copy .notification__lesson-title,
.notification__copy .notification__lecture-author { font-size: 1em; line-height: 1.35; }
.notification__copy .notification__lesson-title-label,
.notification__copy .notification__lecture-time,
.notification__copy .notification__activity-time { font-size: .82em; line-height: 1.4; }
.modern-message #notification { inset: calc(1 * var(--modern-unit)); }
.notification__icon { top: calc(1 * var(--modern-unit)); }
.notification__content { padding-top: calc(8.5 * var(--modern-unit)); }

/* Independent content cards share the prayer panel's elevation. */
.modern-header, .modern-message, .modern-notifications-card {
 box-shadow: 0 calc(1.5 * var(--modern-unit)) calc(4 * var(--modern-unit)) calc(-2 * var(--modern-unit)) rgba(0,0,0,.16);
}
.modern-notifications-card {
 position: relative; flex: 1.65; min-height: 0; overflow: hidden;
 border: 1px solid var(--modern-line); border-radius: calc(3 * var(--modern-unit)); background: var(--color-ui);
}
.modern-notifications-card #notification { position:absolute; inset:0; width:auto; height:auto; border:0; border-radius:0; background:transparent; }
.modern-corner-icon {
 position:absolute; top:calc(2 * var(--modern-unit)); inset-inline-end:calc(2 * var(--modern-unit));
 width:calc(6.5 * var(--modern-unit)); height:calc(6.5 * var(--modern-unit));
 color:var(--modern-accent); opacity:.16; pointer-events:none; z-index:0;
}
.modern-corner-icon svg { width:100%; height:100%; display:block; }
.modern-corner-icon__art { display:block; width:100%; height:100%; transform-origin:center; }
.modern-message > .modern-corner-icon .modern-corner-icon__art,
.modern-notifications-card .modern-corner-icon .modern-corner-icon__art { width:88%; height:88%; }
.modern-notifications-card .modern-corner-icon__art { transform:scaleX(-1); }
.modern-corner-icon.modern-icon-flipping { transform-origin:center; animation:modern-icon-flip var(--modern-motion-switch) var(--modern-motion-ease); will-change:transform; }
@keyframes modern-icon-flip {
 from { transform:perspective(450px) rotateY(0deg); }
 to { transform:perspective(450px) rotateY(-360deg); }
}
@media (prefers-reduced-motion:reduce) {
 .modern-corner-icon.modern-icon-flipping { animation:none; will-change:auto; }
}
.modern-message > .sanad, .modern-message > .content, .modern-message > .source { position:relative; z-index:1; }
.modern-message--alongside { flex:1; justify-content:center; }
.modern-message--alongside > .sanad { font-size:calc(3.2 * var(--modern-unit)); }
.modern-message--alongside > .content { font-size:calc(4.3 * var(--modern-unit)); line-height:1.4; }
.modern-message--alongside > .source { font-size:calc(2.7 * var(--modern-unit)); }
.modern-notifications-card .notification__content { padding-top:calc(3 * var(--modern-unit)); }
@media (max-aspect-ratio:999/1000) {
 .prayertimes-wrapper > .mwaqeet { width:100%; }
 .modern-message--alongside { padding:calc(2 * var(--modern-unit)); gap:calc(.4 * var(--modern-unit)); }
}

.city-weather { background:var(--modern-soft); border-radius:calc(2.2 * var(--modern-unit)); padding:calc(1.2 * var(--modern-unit)) calc(2 * var(--modern-unit)); justify-self:stretch; }
.modern-hadith-copy { display:flex; flex-direction:column; flex:1; min-height:0; width:100%; gap:calc(.7 * var(--modern-unit)); position:relative; z-index:1; }
.modern-hadith-copy > * { flex:0 0 auto; width:100%; margin:0; padding:0; align-self:stretch; overflow-wrap:anywhere; }
.modern-hadith-copy .sanad { font-size:1em; line-height:1.35; }
.modern-hadith-copy .content { font-family:'Qomra','MasjidiDigits',sans-serif; font-feature-settings:"ss01" 1; font-size:1.3em; line-height:1.4; }
.modern-hadith-copy .source { font-size:.8em; line-height:1.4; }
.modern-message > .campaign-notification-slider { margin-top:calc(1 * var(--modern-unit)); }

/* Let the outer card shadows paint beyond their layout wrappers. */
#app, .prayertimes-wrapper > .info { overflow:visible; }
.modern-notifications-card .modern-corner-icon { width:calc(8 * var(--modern-unit)); height:calc(8 * var(--modern-unit)); opacity:1; }
/* Restore the hadith typography used before the card separation. */
.modern-hadith-copy { justify-content:flex-start; }
.modern-hadith-copy .sanad { font-size:calc(4.5 * var(--modern-unit)); }
.modern-hadith-copy .content { font-size:calc(6.5 * var(--modern-unit)); line-height:1.35; }
.modern-hadith-copy .source { font-size:calc(3 * var(--modern-unit)); }
@media (max-aspect-ratio:999/1000) {
 .modern-hadith-copy .sanad { font-size:calc(4.444444 * var(--modern-unit)); }
 .modern-hadith-copy .content { font-size:calc(5.333333 * var(--modern-unit)); }
 .modern-hadith-copy .source { font-size:calc(3.555556 * var(--modern-unit)); }
}

.info .modern-campaign-card {
 position:relative; flex:0 0 auto; width:100%; height:auto; min-height:0; bottom:auto; margin:0;
 padding:calc(1.5 * var(--modern-unit)); border:1px solid var(--modern-line);
 border-radius:calc(3 * var(--modern-unit)); background:var(--color-ui);
 box-shadow:0 calc(1.5 * var(--modern-unit)) calc(4 * var(--modern-unit)) calc(-2 * var(--modern-unit)) rgba(0,0,0,.16);
}
.modern-campaign-card .campaign-notification {
 min-height:calc(15 * var(--modern-unit)); height:auto; padding:0; border:0; background:transparent; box-shadow:none;
}

.modern-message > .modern-corner-icon,
.modern-notifications-card .modern-corner-icon {
 position:absolute; top:calc(2 * var(--modern-unit)); inset-inline-end:calc(2 * var(--modern-unit));
 width:calc(8 * var(--modern-unit)); height:calc(8 * var(--modern-unit));
 opacity:1; color:var(--modern-accent); pointer-events:none;
}

.modern-campaign-card .campaign-notification { position:relative; inset:auto; transform:none; width:100%; }
.modern-header--weather { grid-template-columns:calc(14 * var(--modern-unit)) minmax(0,1fr) calc(20 * var(--modern-unit)); }
.city-weather { padding-inline:calc(1 * var(--modern-unit)); }
.city-weather__reading { flex-direction:row; direction:ltr; gap:calc(.8 * var(--modern-unit)); }
.city-weather__icon { width:calc(7.5 * var(--modern-unit)); height:calc(7.5 * var(--modern-unit)); flex:0 0 auto; }

.notification__bullets {
 flex:0 0 auto; padding-top:calc(1 * var(--modern-unit)); padding-bottom:calc(2.8 * var(--modern-unit));
 min-height:calc(5.1 * var(--modern-unit));
}
.notification__bullet:not(.notification__bullet--active)::after { background:var(--modern-accent); opacity:.28; }
.notification__bullet--active::after { background:var(--modern-accent); opacity:1; }

.modern-hadith-copy > .sanad { margin-bottom:calc(.4 * var(--modern-unit)); }

.modern-header--weather { grid-template-columns:calc(16 * var(--modern-unit)) minmax(0,1fr) calc(20 * var(--modern-unit)); }
.info .modern-header--weather #masjid_logo { height:calc(16 * var(--modern-unit)); }

.city-weather__reading > span:not(.city-weather__icon) { font-weight:700; }

.modern-notifications-card .notification__content { padding-inline:calc(4.5 * var(--modern-unit)); }
.modern-notifications-card .notification__qr { inset-inline-end:calc(4.5 * var(--modern-unit)); }

/* Muted progress stays behind the capsule's label and countdown. */
.timing-status { position:relative; isolation:isolate; overflow:hidden; }
.timing-status::before {
 content:''; position:absolute; inset-block:0; inset-inline-start:0;
 width:var(--countdown-progress,0%); border-radius:inherit;
 background:var(--modern-accent); opacity:.14; pointer-events:none; z-index:0;
 transition:width 1s linear;
}
.timing-status > * { position:relative; z-index:1; }
@media (prefers-reduced-motion:reduce) { .timing-status::before { transition:none; } }

.timing-status::before { border-radius:0; }

.timing-status::before { opacity:.08; }

/* Darkened theme text is reserved for announcement titles. */
.notification__copy > * { color:var(--color-text); }
.notification__copy .notification__header,
.notification__copy .notification__lesson-title,
.modern-campaign-card .campaign-notification__title { color:var(--modern-ink); }
.modern-campaign-card .campaign-notification__description { color:var(--color-text); }

.city-weather__reading { flex-direction:column; gap:calc(.3 * var(--modern-unit)); }

.modern-hadith-copy .content { line-height:1.35; color:var(--color-text); }
.notification__copy .notification__lecture-time,
.notification__copy .notification__lesson-time,
.notification__copy .notification__activity-time {
 display:flex; align-items:center; gap:.2em; font-size:.82em; line-height:1.4;
}
.notification__schedule-icon { display:inline-flex; align-items:center; justify-content:center; align-self:center; width:.82em; height:.82em; flex:0 0 .82em; line-height:1; }
.notification__schedule-icon svg { display:block; width:100%; height:100%; margin:0; }
@media (max-aspect-ratio:999/1000) { .modern-header .date { margin-top:calc(-1.14 * var(--modern-unit)); } }

.timing-status { align-items:center; }
.timing-status .clock { transform:none; align-items:center; }
.timing-status__span--title { display:flex; align-items:center; gap:.28em; }
.timing-status__icon { display:block; width:.88em; height:.88em; flex:0 0 .88em; margin:0; }
/* A calm half-turn every 10 seconds; each turn lasts 800ms like other theme motion. */
.timing-status__icon[data-timing-icon="remaining"] {
 transform-origin:50% 50%;
 animation:modern-hourglass-turn 20s var(--modern-motion-ease) infinite;
}
@keyframes modern-hourglass-turn {
 0%,46% { transform:rotate(0deg); }
 50%,96% { transform:rotate(180deg); }
 100% { transform:rotate(360deg); }
}
/* A faster 720ms ringing burst, followed by a 5.28-second rest. */
.timing-status__icon[data-timing-icon="iqama"] {
 transform-origin:50% 80%;
 animation:modern-iqama-ring 6s ease-in-out infinite;
}
@keyframes modern-iqama-ring {
 0%,12%,100% { transform:translateX(0) rotate(0deg); }
 1%,3%,5%,7%,9%,11% { transform:translateX(-.025em) rotate(-10deg); }
 2%,4%,6%,8%,10% { transform:translateX(.025em) rotate(10deg); }
}
@media (prefers-reduced-motion:reduce) {
 .timing-status__icon[data-timing-icon="remaining"],
 .timing-status__icon[data-timing-icon="iqama"] { animation:none; transform:none; }
}

/* Qomra's Latin ink sits above its centered line box; balance it optically. */
[dir="ltr"] .timing-status__span--title { transform:translateY(.08em); }

/* Balance Qomra's numeral ink around the capsule center. */
.timing-status .clock { transform:translateY(.12em); }
.modern-notifications-card .notification__content { padding-top:calc(2 * var(--modern-unit)); padding-inline:calc(6 * var(--modern-unit)); }
.modern-notifications-card .notification__content--no-qr { padding-bottom:calc(2 * var(--modern-unit)); }
.modern-notifications-card .notification__qr { inset-inline-end:calc(6 * var(--modern-unit)); }
.notification__copy .notification__lecture-time,
.notification__copy .notification__activity-time {
 background:var(--modern-soft); padding:.25em .65em; border-radius:.45em;
 width:fit-content; max-width:100%; align-self:flex-start;
}

/* Clearer outer card edges and elevation for TV viewing. */
body { --modern-card-line:var(--modern-line); }
@supports (color:color-mix(in srgb, black, white)) {
 body { --modern-card-line:color-mix(in srgb,var(--color-text) 34%,var(--color-ui)); }
}
.prayertimes-wrapper > .mwaqeet,
.modern-header,
.modern-message,
.modern-notifications-card,
.info .modern-campaign-card {
 border-width:max(1.5px,calc(.14 * var(--modern-unit)));
 border-color:var(--modern-card-line);
 box-shadow:0 calc(.2 * var(--modern-unit)) calc(.7 * var(--modern-unit)) calc(-.1 * var(--modern-unit)) rgba(0,0,0,.09),
  0 calc(.7 * var(--modern-unit)) calc(1.8 * var(--modern-unit)) calc(-.6 * var(--modern-unit)) rgba(0,0,0,.22);
}

.prayertimes-wrapper > .mwaqeet > .prayers { gap:calc(1.6 * var(--modern-unit)); }

@media (max-aspect-ratio:999/1000) {
 .prayer:not(.prayer--active) { padding-block:0; }
 .prayer:not(.prayer--active) .prayer__time,
 .prayer:not(.prayer--active) .prayer__iqama-wait-duration { line-height:1; }
}

.notification__copy { justify-content:flex-start; }

/* A shorter countdown capsule with more legible labels. */
.timing-status { padding-block:calc(.4 * var(--modern-unit)); }
.timing-status__span--title { font-size:calc(5 * var(--modern-unit)); line-height:1.2; }
.timing-status .clock { line-height:.95; }
.timing-status .clock__part { line-height:inherit; }
@media (max-aspect-ratio:999/1000) {
 .timing-status__span--title { font-size:calc(5.2 * var(--modern-unit)); }
}

.timing-status::before { opacity:.12; }

/* Restore the earlier soft outer-card shadow. */
.prayertimes-wrapper > .mwaqeet,
.modern-header,
.modern-message,
.modern-notifications-card,
.info .modern-campaign-card {
 box-shadow:0 calc(1.5 * var(--modern-unit)) calc(4 * var(--modern-unit)) calc(-2 * var(--modern-unit)) rgba(0,0,0,.16);
}

.info .modern-campaign-card { padding:calc(1 * var(--modern-unit)) calc(3 * var(--modern-unit)); }
.modern-campaign-card .campaign-notification { min-height:calc(11 * var(--modern-unit)); }

.modern-campaign-card .campaign-notification__icon { display:inline-flex; color:var(--modern-accent); }
.modern-campaign-card .campaign-notification__icon svg { display:block; width:88%; height:88%; }
.modern-campaign-card .campaign-notification__icon svg,
.modern-campaign-card .campaign-notification__icon svg * { fill:none; }

.timing-status::before { opacity:.10; }

.info .modern-campaign-card { padding-block:calc(1.5 * var(--modern-unit)); }

.timing-status { padding-block:calc(.6 * var(--modern-unit)); }
.timing-status .clock { line-height:1.15; }

/* Matching muted icon containers; corner icons stay outside content flow. */
.modern-message > .modern-corner-icon,
.modern-notifications-card .modern-corner-icon {
 display:grid; place-items:center;
 width:calc(10 * var(--modern-unit)); height:calc(10 * var(--modern-unit));
 padding:calc(1 * var(--modern-unit)); border-radius:calc(2 * var(--modern-unit));
 background:var(--modern-soft);
}
.modern-campaign-card .campaign-notification__icon {
 display:grid; place-items:center; flex-shrink:0;
 width:calc(6 * var(--modern-unit)); height:calc(6 * var(--modern-unit));
 padding:calc(1 * var(--modern-unit)); border-radius:calc(1.5 * var(--modern-unit));
 background:var(--modern-soft);
}

.notification__copy .notification__header { font-size:1.28em; }
.modern-campaign-card .campaign-notification__title { font-size:calc(4.9 * var(--modern-unit)); font-weight:700; }



/* More space around the announcement and hadith corner icons. */
.modern-message > .modern-corner-icon,
.modern-notifications-card .modern-corner-icon {
 width:calc(8 * var(--modern-unit)); height:calc(8 * var(--modern-unit));
 padding:calc(1.4 * var(--modern-unit));
}

/* Crossfade the outgoing panel beneath the incoming panel on the shared timing. */
.modern-content-stage { position:relative; display:flex; flex-direction:column; flex:1 1 0; min-height:0; min-width:0; isolation:isolate; }
.modern-content-stage > .modern-notifications-card { flex:1 1 0; }
.modern-hadith-panel { position:relative; display:flex; flex-direction:column; flex:1; min-height:0; gap:calc(2 * var(--modern-unit)); }
.modern-content-stage > .modern-card-slide-enter-active { z-index:1; transition:transform var(--modern-motion-switch) var(--modern-motion-ease),opacity var(--modern-motion-switch) var(--modern-motion-ease); will-change:transform,opacity; }
.modern-content-stage > .modern-card-slide-leave-active { position:absolute; inset:0; width:100%; height:100%; z-index:0; transition:opacity var(--modern-motion-switch) var(--modern-motion-ease); will-change:opacity; pointer-events:none; }
.modern-card-slide-enter-from { opacity:0; transform:translateY(25%); }
.modern-card-slide-leave-to { opacity:0; transform:none; }
.modern-card-slide-enter-to,
.modern-card-slide-leave-from { opacity:1; transform:translateY(0); }
.modern-hadith-copy { font-size:calc(4.5 * var(--modern-unit)); opacity:1; transition:opacity var(--modern-motion-switch) var(--modern-motion-ease); }
.modern-hadith-copy--leaving { opacity:.45; transition-duration:calc(var(--modern-motion-switch) * .4); transition-timing-function:ease-in-out; }
@media (max-aspect-ratio:999/1000) { .modern-hadith-copy { font-size:calc(4.444444 * var(--modern-unit)); } }
@media (prefers-reduced-motion:reduce) {
 .modern-card-slide-enter-active,.modern-card-slide-leave-active,
 .modern-hadith-copy { transition:none; }
 .modern-card-slide-enter-from,.modern-card-slide-leave-to { transform:none; }
 .modern-hadith-copy--leaving { opacity:1; }
}

.info .modern-campaign-card { padding-block:calc(2.5 * var(--modern-unit)); }

.prayer--active { padding-bottom:calc(3 * var(--modern-unit)); }

.modern-message { padding:calc(4 * var(--modern-unit)); padding-inline-start:calc(16 * var(--modern-unit)); }

/* Preserve the hadith type hierarchy while fitting within its padded area. */
.modern-hadith-copy .sanad { font-size:1em; }
.modern-hadith-copy .content { font-size:1.444444em; }
.modern-hadith-copy .source { font-size:.666667em; }
@media (max-aspect-ratio:999/1000) {
 .modern-hadith-copy .content { font-size:1.2em; }
 .modern-hadith-copy .source { font-size:.8em; }
}

/* Legacy ornament, limited to the lower 50% and fading upward behind content. */
.modern-card-pattern {
 position:absolute; inset-inline:0; bottom:0; height:50%;
 overflow:hidden; pointer-events:none; user-select:none; z-index:0;
 opacity:.60;
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 100%);
 mask-image:linear-gradient(to bottom,transparent 0%,#000 100%);
}
.modern-card-pattern > svg {
 display:block; position:absolute; left:0; bottom:0;
 width:181.818182%; height:181.818182%; max-width:none;
 transform:scale(.55); transform-origin:bottom left;
}
.modern-card-pattern.modern-page-pattern {
 position:fixed; top:0; left:0; right:0; bottom:auto; height:50%; z-index:-1;
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 100%);
 mask-image:linear-gradient(to bottom,#000 0%,transparent 100%);
}
.modern-page-pattern > svg {
 top:0; bottom:auto; transform-origin:top left;
}
.modern-notifications-card #notification { z-index:1; }

/* Reverse the existing theme colors for the three content-card icon badges. */
.modern-message > .modern-corner-icon,
.modern-notifications-card .modern-corner-icon,
.modern-campaign-card .campaign-notification__icon {
 background:var(--modern-accent);
 color:var(--modern-soft);
}

/* Prayer time values use the normal theme text color. */
.prayer .prayer__name,
.prayer .prayer__time,
.prayer .prayer__iqama-wait-duration { color:var(--color-text); }

/* Give every announcement slide more breathing room above its first line. */
.modern-notifications-card .notification__content { padding-top:calc(5 * var(--modern-unit)); }

/* Reverse the previous quote orientation; the whole-badge flip stays independent. */
.modern-message > .modern-corner-icon svg { transform:scaleX(1); }

/* Slightly smaller logo, centered in its existing header column. */
.info .modern-header #masjid_logo {
 width:93.75%; height:calc(15 * var(--modern-unit)); justify-self:center;
}

/* Qomra lacks U+FDFA; enlarge the existing salawat artwork in the Hadith heading. */
.modern-hadith-copy .sanad .holy-symbol {
 width:1.45em; height:1.45em; padding-inline:.08em; vertical-align:-.175em;
}

/* Put the leading icon beside a reserved text column, in either text direction. */
.modern-message > .modern-corner-icon,
.modern-notifications-card .modern-corner-icon {
 inset-inline-start:calc(3 * var(--modern-unit)); inset-inline-end:auto;
 top:calc(4 * var(--modern-unit));
}
.modern-message { padding-inline-start:calc(16 * var(--modern-unit)); }
.modern-notifications-card .notification__content { padding-inline-start:calc(16 * var(--modern-unit)); }

/* White rounded QR badge, aligned to the right of announcement slides. */
.modern-notifications-card .notification__qr {
 inset-inline-start:auto; inset-inline-end:auto; left:auto; right:calc(6 * var(--modern-unit));
 width:calc(14 * var(--modern-unit)); height:calc(14 * var(--modern-unit));
 padding:calc(1 * var(--modern-unit)); background:#fff;
 border-radius:calc(1.4 * var(--modern-unit));
}

/* Restore the softer icon badge in the notification below the Hadith. */
.modern-campaign-card .campaign-notification__icon {
 background:var(--modern-soft); color:var(--modern-accent);
}

/* Align the QR badge with the text column after the leading icon. */
.modern-notifications-card .notification__qr {
 left:auto; right:auto; inset-inline-start:calc(16 * var(--modern-unit)); inset-inline-end:auto;
}

/* Plain schedule row and a microphone beside the lecturer's name. */
.notification__copy .notification__lecture-time,
.notification__copy .notification__lesson-time,
.notification__copy .notification__activity-time {
 background:transparent; padding:0; border-radius:0;
}
.notification__copy .notification__lecturer { display:flex; align-items:center; gap:.4em; }
.notification__lecturer-icon { display:block; width:.82em; height:.82em; flex:0 0 .82em; }
.notification__lecturer > span { min-width:0; }

/* The badge leads a separate side column in either text direction. */
.modern-message > .modern-corner-icon {
 inset-inline:auto; left:auto; right:auto; inset-inline-start:calc(2.2 * var(--modern-unit));
 top:calc(2.2 * var(--modern-unit)); bottom:auto;
}
.modern-message { padding-inline-start:calc(16 * var(--modern-unit)); }

/* The card padding keeps all heading and body rows beside the icon. */
.modern-hadith-copy > .sanad {
 min-height:0; padding:0; margin:0;
}

/* Anchor the notification's info badge to the top of the content row. */
.modern-campaign-card .campaign-notification__icon { align-self:flex-start; }

/* Match the visible date gap, compensating for the microphone's inset artwork. */
.notification__copy .notification__lecturer { gap:.2em; }

/* QR at the reading-start edge, with the caption aligned toward it in each language. */
.modern-notifications-card .notification__qr-details {
 position:absolute; inset-inline:auto; left:auto; right:auto; inset-inline-start:calc(6 * var(--modern-unit));
 max-width:calc(100% - 22 * var(--modern-unit)); direction:inherit;
 bottom:calc(1 * var(--modern-unit)); display:flex; flex-direction:row; align-items:center; gap:calc(2 * var(--modern-unit));
}
.modern-notifications-card .notification__qr-details .notification__qr {
 position:static; inset:auto; flex:0 0 calc(14 * var(--modern-unit)); margin:0;
 box-shadow:0 calc(.4 * var(--modern-unit)) calc(1.2 * var(--modern-unit)) rgba(0,0,0,.16);
}
.notification__qr-note {
 font-family:'MasjidiDigits',sans-serif; font-size:calc(2.8 * var(--modern-unit)); font-weight:400;
 line-height:1.45; color:var(--color-text); max-width:calc(35 * var(--modern-unit)); min-width:0; text-align:start;
}

.notification__qr-note { font-family:'Qomra','MasjidiDigits',sans-serif; font-feature-settings:"ss01" 1; }
.notification__qr-action { display:block; font-size:1.35em; line-height:1.3; font-weight:700; }
.notification__qr-detail { display:block; font-weight:400; }

/* Weather and the calculated moon share one stable slot, in sync with the date. */
.city-weather { min-height:calc(18 * var(--modern-unit)); justify-content:center; }
.modern-moon-reading { flex-direction:column; }
.modern-moon-icon { display:block; width:calc(8 * var(--modern-unit)); height:calc(8 * var(--modern-unit)); flex:0 0 auto; }
.modern-moon-icon--southern { transform:rotate(180deg); }
.modern-moon-icon { filter:drop-shadow(0 calc(.45 * var(--modern-unit)) calc(.8 * var(--modern-unit)) rgba(0,0,0,.22)); }
.modern-moon-age { display:flex; align-items:baseline; justify-content:center; direction:ltr; gap:.18em; font-size:calc(4.2 * var(--modern-unit)); line-height:1.3; }
.modern-moon-age small { font-size:.62em; font-weight:500; }
.modern-sky-fade-enter-active,.modern-sky-fade-leave-active { transition:opacity var(--modern-motion-switch) var(--modern-motion-ease); will-change:opacity; }
.modern-sky-fade-enter-from,.modern-sky-fade-leave-to { opacity:0; }
.modern-sky-fade-enter-to,.modern-sky-fade-leave-from { opacity:1; }
@media (prefers-reduced-motion:reduce) { .modern-sky-fade-enter-active,.modern-sky-fade-leave-active { transition:none; } }

/* Realistic transparent weather artwork, sized consistently for TV. */
.city-weather__icon--realistic { width:calc(9 * var(--modern-unit)); height:calc(9 * var(--modern-unit)); object-fit:contain; }

/* Unframed sky artwork with a stable area for the weather/moon fade. */
.city-weather { background:transparent; border:0; border-radius:0; box-shadow:none; padding:0; }
.city-weather__icon--realistic,.modern-moon-icon { width:calc(11 * var(--modern-unit)); height:calc(11 * var(--modern-unit)); }

/* Larger sky artwork may overflow the header without resizing its grid row. */
.modern-header { overflow:visible; }
.city-weather { position:relative; height:calc(18 * var(--modern-unit)); overflow:visible; }
.city-weather__reading { position:absolute; top:50%; left:50%; width:100%; transform:translate(-50%,-50%); }
.city-weather__icon--realistic,.modern-moon-icon { width:calc(17 * var(--modern-unit)); height:calc(17 * var(--modern-unit)); }

/* Oversized artwork with a temperature badge over the bottom of the weather icon. */
.city-weather { z-index:2; }
.city-weather__reading { left:calc(50% + var(--modern-sky-x) * var(--modern-unit)); height:calc(26 * var(--modern-unit)); justify-content:center; }
.city-weather__icon--realistic,.modern-moon-icon { width:calc(26 * var(--modern-unit)); height:calc(26 * var(--modern-unit)); max-width:none; }
.city-weather__icon--realistic {
 /* Shrink toward the inside, preserving the top/outer edge in both languages. */
 width:calc(20 * var(--modern-unit)); height:calc(20 * var(--modern-unit));
 transform:translate(calc(var(--modern-weather-x) * var(--modern-unit)),calc(-3 * var(--modern-unit)));
}
/* Move only the artwork around a tiny circle, keeping it upright and the degree still. */
.city-weather__icon--vector > svg {
 transform-origin:50% 50%;
 filter:none;
 animation:none;
 transform:none;
}
@keyframes modern-weather-drift {
 0%,100% { transform:translate(calc(-.35 * var(--modern-unit)),0); }
 25% { transform:translate(calc(.1 * var(--modern-unit)),calc(-.3 * var(--modern-unit))); }
 50% { transform:translate(calc(.55 * var(--modern-unit)),0); }
 75% { transform:translate(calc(.1 * var(--modern-unit)),calc(.3 * var(--modern-unit))); }
}
@media (prefers-reduced-motion:reduce) {
 .city-weather__icon--vector > svg { animation:none; transform:none; }
}
.city-weather__reading > span:not(.city-weather__icon) {
 position:absolute; top:auto; bottom:calc(3.5 * var(--modern-unit)); left:calc(50% + var(--modern-weather-x) * var(--modern-unit)); transform:translateX(-50%); z-index:2; white-space:nowrap;
 /* Qomra's numeral ink sits above its line-box center; balance it optically. */
 display:flex; align-items:center; justify-content:center; padding:calc(.9 * var(--modern-unit)) calc(1.4 * var(--modern-unit)) 0;
 border:0; border-radius:calc(1.4 * var(--modern-unit));
 background:transparent;
 box-shadow:none;
 font-family:'Qomra','MasjidiDigits',sans-serif; font-weight:700; font-feature-settings:"ss01" 0; font-variant-numeric:tabular-nums;
 font-size:calc(4.8 * var(--modern-unit)); line-height:1.15; color:var(--color-text);
}
/* Weather artwork and its separate reading fit inside the header; the moon keeps its own position. */
.modern-header--weather { position:relative; grid-template-columns:calc(16 * var(--modern-unit)) minmax(0,1fr) calc(18 * var(--modern-unit)); }
/* Sky artwork is an overlay and must never determine the header row height. */
/* Clear the inherited grid area: absolute sky insets must use the whole header, not its first content row. */
.modern-header--weather > .city-weather { position:absolute; grid-area:auto; inset-inline-end:calc(2 * var(--modern-unit)); inset-block:0; width:calc(26 * var(--modern-unit)); height:auto; min-height:0; margin:0; padding:0; overflow:visible; contain:size; }
.city-weather__reading.modern-weather-reading { top:50%; left:calc(50% + 2.5 * var(--modern-weather-x) * var(--modern-unit)); width:calc(18 * var(--modern-unit)); height:100%; box-sizing:border-box; padding-block:calc(.4 * var(--modern-unit)); flex-direction:column; align-items:center; justify-content:center; gap:calc(.2 * var(--modern-unit)); }
.modern-weather-reading .city-weather__icon--realistic { color:var(--modern-ink); width:calc(13 * var(--modern-unit)); height:calc(13 * var(--modern-unit)); min-height:0; flex:0 1 calc(13 * var(--modern-unit)); transform:none; filter:none; }
.modern-header--weather,
.modern-header--weather .city-weather,
.modern-weather-reading,
.modern-weather-reading .city-weather__icon,
.modern-weather-reading svg { overflow:visible; }
.city-weather__reading.modern-weather-reading > span:not(.city-weather__icon) { position:static; inset:auto; transform:none; align-self:center; text-align:center; font-family:'Qomra','MasjidiDigits',sans-serif; font-size:calc(4.9 * var(--modern-unit)); padding:0; margin:0; }
.city-weather__reading.modern-weather-reading > span.modern-weather-temperature { display:grid; align-self:center; flex-shrink:0; margin-block-start:0; min-width:3.8ch; transform:translateY(calc(-1.1 * var(--modern-unit))); }
.modern-weather-temperature > span { grid-area:1 / 1; text-align:center; }
/* Modern temperature numerals use the same digits face as the clock/prayer values. */
.prayertimes-wrapper[data-modern-style="7"] .modern-weather-temperature > span {
 font-family:'MasjidiDigits','Qomra',sans-serif;
 font-weight:500;
}

.modern-weather-temperature .modern-weather-unit { font-size:.7em; font-weight:inherit; line-height:1; }
.modern-temperature-fade-enter-active,.modern-temperature-fade-leave-active { transition:opacity var(--modern-motion-switch) var(--modern-motion-ease); }
.modern-temperature-fade-enter-from,.modern-temperature-fade-leave-to { opacity:0; }
@media (prefers-reduced-motion:reduce) { .modern-temperature-fade-enter-active,.modern-temperature-fade-leave-active { transition:none; } }

/* A larger moon can extend beyond the header's leading edge. */
.modern-moon-reading .modern-moon-icon {
 width:calc(17.5 * var(--modern-unit)); height:calc(17.5 * var(--modern-unit));
 position:relative; left:calc(2 * var(--modern-moon-x) * var(--modern-unit)); top:calc(-.4 * var(--modern-unit));
}

/* URL layout presets retain card sizes and content transitions. */
.prayertimes-wrapper[data-modern-layout="2"] > .info > .modern-header,
.prayertimes-wrapper[data-modern-layout="3"] > .info > .modern-header {
 order:1;
}

/* Horizontal prayers: full-width content above a bottom prayer strip. */
.prayertimes-wrapper[data-modern-horizontal="true"] { flex-direction:column; }
.prayertimes-wrapper[data-modern-horizontal="true"] > .info {
 order:0; width:100%; flex:1 1 0; min-height:0;
}
.prayertimes-wrapper[data-modern-horizontal="true"] > .mwaqeet {
 order:1; width:100%; flex:0 0 calc(30 * var(--modern-unit));
 padding:calc(2 * var(--modern-unit));
}
.prayertimes-wrapper[data-modern-horizontal="true"] > .mwaqeet > .prayers {
 flex-direction:row; gap:calc(1.4 * var(--modern-unit));
}
.prayertimes-wrapper[data-modern-horizontal="true"] .prayer {
 width:auto; min-width:0; flex:1 1 0; border-radius:calc(3 * var(--modern-unit));
 padding:calc(1.4 * var(--modern-unit)); gap:calc(.8 * var(--modern-unit));
}
.prayertimes-wrapper[data-modern-horizontal="true"] .prayer--active { flex-grow:1; }
.prayertimes-wrapper[data-modern-horizontal="true"] .prayer__main {
 flex-direction:column; justify-content:center; gap:calc(.5 * var(--modern-unit)); padding:0;
}
.prayertimes-wrapper[data-modern-horizontal="true"] .prayer__icon { order:0; flex-basis:auto; }
.prayertimes-wrapper[data-modern-horizontal="true"] .prayer__name {
 order:1; font-size:calc(4.8 * var(--modern-unit)); line-height:1.15; transform:none;
}
.prayertimes-wrapper[data-modern-horizontal="true"] .prayer__time,
.prayertimes-wrapper[data-modern-horizontal="true"] .prayer__iqama-wait-duration {
 order:2; font-size:calc(6.4 * var(--modern-unit)); line-height:1.1;
 letter-spacing:calc(-.08 * var(--modern-unit));
}
.prayertimes-wrapper[data-modern-horizontal="true"] .timing-status {
 padding:calc(.6 * var(--modern-unit)) calc(1.2 * var(--modern-unit));
 gap:calc(.6 * var(--modern-unit));
}
.prayertimes-wrapper[data-modern-horizontal="true"] .timing-status__span--title {
 font-size:calc(2.8 * var(--modern-unit)); line-height:1.2;
}
.prayertimes-wrapper[data-modern-horizontal="true"] .timing-status .clock,
.prayertimes-wrapper[data-modern-horizontal="true"] .timing-status .clock__part {
 font-size:calc(4.1 * var(--modern-unit)); line-height:1.15;
}
/* Portrait keeps the bottom strip readable as two rows of three cards. */
@media (max-aspect-ratio:999/1000) {
 .prayertimes-wrapper[data-modern-horizontal="true"] > .mwaqeet { flex-basis:calc(54 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-horizontal="true"] > .mwaqeet > .prayers {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:minmax(0,1fr);
 }
 .prayertimes-wrapper[data-modern-horizontal="true"] .prayer { width:100%; justify-self:stretch; }
}

/* Horizontal layouts have one countdown: beside the header on TV, below prayers in portrait. */
.prayertimes-wrapper[data-modern-horizontal="true"] { position:relative; }
.prayertimes-wrapper[data-modern-horizontal="true"] > .modern-countdown-card {
 order:2; flex:0 0 calc(12 * var(--modern-unit)); min-width:0;
 padding:calc(1 * var(--modern-unit)) calc(3 * var(--modern-unit));
 border:1px solid var(--modern-accent); border-radius:calc(3 * var(--modern-unit));
 background:var(--modern-accent); color:var(--color-bright_text);
 box-shadow:0 calc(1.5 * var(--modern-unit)) calc(4 * var(--modern-unit)) calc(-2 * var(--modern-unit)) rgba(0,0,0,.16);
}
.prayertimes-wrapper[data-modern-horizontal="true"] > .modern-countdown-card::before {
 background:var(--color-bright_text); opacity:.10;
}
.prayertimes-wrapper[data-modern-horizontal="true"] > .modern-countdown-card .timing-status__span--title {
 font-size:calc(4.5 * var(--modern-unit));
}
.prayertimes-wrapper[data-modern-horizontal="true"] > .modern-countdown-card .clock,
.prayertimes-wrapper[data-modern-horizontal="true"] > .modern-countdown-card .clock__part {
 font-size:calc(8 * var(--modern-unit));
}
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-horizontal="true"] > .info > .modern-header {
  margin-inline-end:calc(40 * var(--modern-unit));
 }
 .prayertimes-wrapper[data-modern-horizontal="true"] > .modern-countdown-card {
  position:absolute; inset-block-start:0; inset-inline-end:0;
  width:calc(38 * var(--modern-unit)); height:calc(20 * var(--modern-unit) + 2px);
  flex-direction:column; justify-content:center; gap:calc(1 * var(--modern-unit));
 }
 .prayertimes-wrapper[data-modern-horizontal="true"] > .modern-countdown-card .clock,
 .prayertimes-wrapper[data-modern-horizontal="true"] > .modern-countdown-card .clock__part {
  font-size:calc(9 * var(--modern-unit));
 }
 .prayertimes-wrapper[data-modern-horizontal="true"] > .modern-countdown-card--hours .clock,
 .prayertimes-wrapper[data-modern-horizontal="true"] > .modern-countdown-card--hours .clock__part {
  font-size:calc(7.5 * var(--modern-unit));
 }
}
/* Side selection applies to landscape; portrait keeps the readable stacked layout. */
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-horizontal="true"] .modern-message {
  padding:calc(2.5 * var(--modern-unit)); padding-inline-start:calc(11 * var(--modern-unit));
 }
 .prayertimes-wrapper[data-modern-horizontal="true"] .modern-hadith-copy { padding-inline:0; }
 .prayertimes-wrapper[data-modern-horizontal="true"] .modern-hadith-copy > .sanad {
  min-height:0; padding:0; margin:0;
 }
 .prayertimes-wrapper[data-modern-horizontal="true"] .modern-campaign-card { padding-block:calc(1.2 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-horizontal="true"] .campaign-notification { min-height:calc(8 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-horizontal="true"] .campaign-notification__qr { width:calc(8 * var(--modern-unit)); height:calc(8 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-horizontal="true"] .campaign-notification__title { font-size:calc(4 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-horizontal="true"] .campaign-notification__description { font-size:calc(3.2 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-layout="1"],
 .prayertimes-wrapper[data-modern-layout="3"] { flex-direction:row-reverse; }
 [dir="rtl"] .prayertimes-wrapper[data-modern-layout="1"],
 [dir="rtl"] .prayertimes-wrapper[data-modern-layout="3"] { flex-direction:row; }
}

/* Layout 5 moves the horizontal prayer panel above the remaining content. */
.prayertimes-wrapper[data-modern-layout="5"] > .mwaqeet { order:-1; }
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-layout="5"] > .modern-countdown-card {
  inset-block-start:calc(32 * var(--modern-unit));
 }
}
@media (max-aspect-ratio:999/1000) {
 .prayertimes-wrapper[data-modern-layout="5"] > .modern-countdown-card { order:0; }
 .prayertimes-wrapper[data-modern-layout="5"] > .info { order:1; }
}

/* Adaptive dark-mode treatment. Light palettes retain their existing colors. */
[data-theme="dark"] body {
 --modern-card-line:rgba(255,255,255,.32);
 --modern-line:var(--modern-card-line);
}
@supports (color:color-mix(in srgb,black,white)) {
 [data-theme="dark"] body {
  --modern-card-line:color-mix(in srgb,var(--color-text) 36%,var(--color-ui));
 }
}
[data-theme="dark"] .prayertimes-wrapper > .mwaqeet,
[data-theme="dark"] .modern-header,
[data-theme="dark"] .modern-message,
[data-theme="dark"] .modern-notifications-card,
[data-theme="dark"] .info .modern-campaign-card {
 background:var(--color-ui);
 background:color-mix(in srgb,var(--color-text) 3%,var(--color-ui));
 border-color:var(--modern-card-line);
}
[data-theme="dark"] .timing-status,
[data-theme="dark"] .city-weather__reading > span:not(.city-weather__icon),
[data-theme="dark"] .modern-message > .modern-corner-icon,
[data-theme="dark"] .modern-notifications-card .modern-corner-icon,
[data-theme="dark"] .modern-campaign-card .campaign-notification__icon {
 color:var(--color-text);
}
[data-theme="dark"] .sanad {
 color:var(--color-text);
 color:color-mix(in srgb,var(--color-text) 70%,var(--modern-accent));
}
[data-theme="dark"] .timing-status::before { background:var(--color-text); }
[data-theme="dark"] .prayer--active {
 background-image:linear-gradient(155deg,rgba(255,255,255,.08),transparent 65%);
}
[data-theme="dark"] .modern-card-pattern { opacity:.35; }

/* Layout 6: logo/date, prayers, then the rotating content panel. */
.prayertimes-wrapper[data-modern-layout="6"] > .info { display:contents; }
.prayertimes-wrapper[data-modern-layout="6"] > .info > .modern-header { order:0; }
.prayertimes-wrapper[data-modern-layout="6"] > .mwaqeet { order:1; }
.prayertimes-wrapper[data-modern-layout="6"] > .info > :not(.modern-header) { order:3; flex:1 1 0; min-height:0; }
@media (max-aspect-ratio:999/1000) {
 .prayertimes-wrapper[data-modern-layout="6"] > .modern-countdown-card { order:2; }
}
/* Keep the stationary announcement badge above the transformed carousel slides. */
.modern-notifications-card .notification__content-container { position:relative; z-index:0; }
.modern-notifications-card .modern-corner-icon { z-index:2; }
/* A little more room above the app notification content. */
.info .modern-campaign-card { padding-block-start:calc(3.8 * var(--modern-unit)); }
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-horizontal="true"] .modern-campaign-card { padding-block-start:calc(1.7 * var(--modern-unit)); }
}

/* Event badges share the announcement icon's height in every layout. */
.modern-notifications-card {
 --modern-event-badge-height:calc(8 * var(--modern-unit));
 --modern-event-badge-top:calc(2.2 * var(--modern-unit));
}
.notification__copy .notification__event-tag {
 display:inline-flex; align-items:center; justify-content:center; align-self:center;
 flex:0 0 auto; width:auto; max-width:100%; height:auto;
 min-width:0; min-height:0; box-sizing:border-box;
 font-family:'Qomra','MasjidiDigits',sans-serif; font-size:calc(3.8 * var(--modern-unit));
 line-height:1.2; font-weight:700; text-align:center; white-space:nowrap;
 color:var(--color-text); background:var(--modern-soft);
 background:color-mix(in srgb,var(--color-text) 14%,var(--color-ui));
 border:1px solid var(--modern-line); border-radius:calc(1.5 * var(--modern-unit));
 padding:.2em .55em; margin:0;
}

/* Time-aware event status stays readable and follows the theme palette. */
.notification__copy .notification__event-note {
 flex:0 0 auto; width:auto; font-family:'MasjidiDigits',sans-serif; font-size:.5em;
 font-size:max(.5em,calc(2.4 * var(--modern-unit))); line-height:1.5;
 color:var(--color-text); margin-bottom:.25em;
}
.notification__copy .notification__event-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.2em .5em; flex:0 0 auto; }
.notification__copy .notification__event-meta .notification__event-tag,
.notification__copy .notification__event-meta .notification__event-note { margin:0; align-self:center; }
.notification__content[data-event-phase="live"] .notification__copy,
.notification__content[data-event-phase="soon"] .notification__copy { gap:calc(.2 * var(--modern-unit)); padding-block:0; }
.notification__event-tag > .notification__event-label {
 display:block; line-height:inherit; transform:translateY(var(--modern-event-label-offset,0));
}
/* Keep event metadata compact while the QR occupies its own footer. */
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-horizontal="true"] .notification__content:is(.notification__content--lecture,.notification__content--lesson,.notification__content--activity) .notification__copy {
  gap:calc(.45 * var(--modern-unit)); padding-block:0;
 }
}

/* Event metadata keeps its responsive sizing with a calmer maximum across styles. */
.notification__copy :is(.notification__lecturer,.notification__lesson-time,.notification__lecture-time,.notification__activity-time) {
 font-size:min(.82em,calc(6.5 * var(--modern-unit)));
}

/* Keep lecturer before the schedule, sharing a row on landscape TV layouts. */
.notification__lecture-meta { display:flex; flex-direction:column; align-items:flex-start; gap:calc(1.2 * var(--modern-unit)); }
.notification__lecture-meta:empty { display:none; }
.notification__copy .notification__lecture-meta > .notification__lecturer,
.notification__copy .notification__lecture-meta > .notification__lecture-time {
 display:flex; align-items:center; align-self:auto; font-size:min(1em,calc(6.5 * var(--modern-unit))); line-height:1.4;
}
.notification__lecture-meta .notification__lecturer-icon,
.notification__lecture-meta .notification__schedule-icon { align-self:center; }
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-horizontal="true"] .notification__lecture-meta {
  flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:.8em; row-gap:.2em;
 }
 .prayertimes-wrapper[data-modern-horizontal="true"] .notification__lecture-meta > * { margin:0; min-width:0; max-width:100%; }
}

/* Match the Hadith side column and keep the badge above moving carousel slides. */
.modern-notifications-card .modern-corner-icon {
 inset-inline:auto; left:auto; right:auto; inset-inline-start:calc(2.2 * var(--modern-unit));
 top:calc(2.2 * var(--modern-unit)); bottom:auto;
 width:var(--modern-event-badge-height); height:var(--modern-event-badge-height);
}
.modern-notifications-card .notification__content {
 padding-top:calc(4 * var(--modern-unit));
 padding-inline-start:calc(16 * var(--modern-unit));
 padding-inline-end:calc(6 * var(--modern-unit));
 padding-bottom:calc(16 * var(--modern-unit));
}
.modern-notifications-card .notification__content--no-qr { padding-bottom:calc(4 * var(--modern-unit)); }

/* Status, headings, and body copy share the content column beside the icon. */
.modern-notifications-card .notification__event-meta {
 position:static; inset:auto;
}
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-horizontal="true"] .modern-notifications-card {
  --modern-event-badge-height:calc(5 * var(--modern-unit));
  --modern-event-badge-top:calc(2 * var(--modern-unit));
 }
 .prayertimes-wrapper[data-modern-horizontal="true"] .notification__event-tag {
  font-size:calc(3.4 * var(--modern-unit)); border-radius:calc(1.1 * var(--modern-unit));
 }
 /* The shallower horizontal layouts use a narrower icon column. */
 .prayertimes-wrapper[data-modern-horizontal="true"] .modern-message > .modern-corner-icon,
 .prayertimes-wrapper[data-modern-horizontal="true"] .modern-notifications-card .modern-corner-icon {
  top:calc(2 * var(--modern-unit));
  width:var(--modern-event-badge-height,calc(5 * var(--modern-unit))); height:var(--modern-event-badge-height,calc(5 * var(--modern-unit)));
  padding:calc(.9 * var(--modern-unit)); border-radius:calc(1.3 * var(--modern-unit));
 }
 .prayertimes-wrapper[data-modern-horizontal="true"] .modern-notifications-card .notification__content {
  padding-top:calc(2.8 * var(--modern-unit)); padding-inline-start:calc(11 * var(--modern-unit));
 }
}
/* Both cards use matching icon badges and a clear 3.5-unit text gap. */
.modern-message,
.modern-notifications-card .notification__content { padding-inline-start:calc(13.7 * var(--modern-unit)); }
.modern-message > .modern-corner-icon { width:calc(8 * var(--modern-unit)); height:calc(8 * var(--modern-unit)); padding:calc(1.4 * var(--modern-unit)); }
/* Match the Smartbox badge and text spacing without widening the QR gap. */
.info .modern-campaign-card {
 padding-inline-start:calc(2.2 * var(--modern-unit));
 padding-block-start:calc(2.2 * var(--modern-unit));
}
.modern-campaign-card .campaign-notification__icon {
 width:calc(8 * var(--modern-unit)); height:calc(8 * var(--modern-unit));
 padding:calc(1.4 * var(--modern-unit)); border-radius:calc(2 * var(--modern-unit));
 margin-inline-end:calc(1.9 * var(--modern-unit));
}
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-horizontal="true"] .info .modern-campaign-card { padding-block-start:calc(2.8 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-horizontal="true"] .modern-message,
 .prayertimes-wrapper[data-modern-horizontal="true"] .modern-notifications-card .notification__content { padding-inline-start:calc(10.5 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-horizontal="true"] .modern-message > .modern-corner-icon { width:calc(5 * var(--modern-unit)); height:calc(5 * var(--modern-unit)); padding:calc(.9 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-horizontal="true"] .modern-campaign-card .campaign-notification__icon {
  width:calc(5 * var(--modern-unit)); height:calc(5 * var(--modern-unit));
  padding:calc(.9 * var(--modern-unit)); border-radius:calc(1.3 * var(--modern-unit));
  margin-inline-end:calc(1.7 * var(--modern-unit));
 }
}
.modern-notifications-card .notification__content[data-event-phase]:not([data-event-phase=""]) {
 padding-top:var(--modern-event-badge-top);
}
.modern-notifications-card .notification__content[data-event-phase]:not([data-event-phase=""]) .notification__copy {
 padding-top:0;
}

/* Give the iqama label a little more breathing room beside or above its clock. */
.prayertimes-wrapper .timing-status[data-status="iqama"] { gap:calc(1.6 * var(--modern-unit)); }

/* A theme-colored border marks the current/next prayer; every prayer shares its fill.
   Reserve identical border width on inactive prayers to keep content positions stable. */
.prayertimes-wrapper .prayer { border-width:max(1.5px,calc(.18 * var(--modern-unit))); }
.prayertimes-wrapper .prayer--active {
 background:var(--modern-soft); background-image:none;
 color:var(--color-darker_text); border-color:var(--color-text); border-style:solid;
}
.prayertimes-wrapper .prayer--active .prayer__name,
.prayertimes-wrapper .prayer--active .prayer__time,
.prayertimes-wrapper .prayer--active .prayer__iqama-wait-duration { color:var(--color-darker_text); }
/* Give the highlighted prayer a visibly deeper shade even when both palette tokens match. */
.prayertimes-wrapper .prayer.prayer--active .prayer__name,
.prayertimes-wrapper .prayer.prayer--active .prayer__time,
.prayertimes-wrapper .prayer.prayer--active .prayer__iqama-wait-duration { color:var(--modern-current-prayer-ink,var(--color-darker_text)); }
@supports (color:color-mix(in srgb,black,white)) {
 html:not([data-theme="dark"]) .prayer--active { --modern-current-prayer-ink:color-mix(in srgb,var(--color-darker_text) 80%,#000); }
}
[data-theme="dark"] .prayer--active { --modern-current-prayer-ink:var(--color-text); }
.prayertimes-wrapper[data-modern-horizontal="false"] > .mwaqeet {
 display:flex; flex-direction:column; gap:calc(2 * var(--modern-unit));
 padding:0; border:0; border-radius:0; background:transparent; box-shadow:none;
}
.prayertimes-wrapper[data-modern-horizontal="false"] > .mwaqeet > .prayers {
 flex:1 1 0; height:auto; min-height:0; min-width:0;
 padding:calc(2.7 * var(--modern-unit));
 border:max(1.5px,calc(.14 * var(--modern-unit))) solid var(--modern-card-line,var(--modern-line));
 border-radius:calc(3 * var(--modern-unit)); background:var(--color-ui);
 box-shadow:0 calc(1.5 * var(--modern-unit)) calc(4 * var(--modern-unit)) calc(-2 * var(--modern-unit)) rgba(0,0,0,.16);
}
.prayertimes-wrapper[data-modern-horizontal="false"] .prayer--active {
 flex:1; padding:calc(.6 * var(--modern-unit)) calc(4 * var(--modern-unit));
 gap:calc(1 * var(--modern-unit)); border-radius:calc(3 * var(--modern-unit));
}
.prayertimes-wrapper[data-modern-horizontal="false"] .prayer--active .prayer__main { padding:0; }
[data-theme="dark"] .prayertimes-wrapper[data-modern-horizontal="false"] > .mwaqeet > .prayers {
 background:var(--color-ui);
 background:color-mix(in srgb,var(--color-text) 3%,var(--color-ui));
}
.mwaqeet > .modern-countdown-card--stacked {
 flex:0 0 calc(14 * var(--modern-unit)); min-height:calc(14 * var(--modern-unit));
 width:100%; margin:0; padding:calc(.4 * var(--modern-unit)) calc(3 * var(--modern-unit));
 gap:calc(1.2 * var(--modern-unit)); border:1px solid var(--modern-accent);
 border-radius:calc(3 * var(--modern-unit)); background:var(--modern-accent); color:var(--color-bright_text);
 box-shadow:0 calc(1.5 * var(--modern-unit)) calc(4 * var(--modern-unit)) calc(-2 * var(--modern-unit)) rgba(0,0,0,.16);
}
.modern-countdown-card--stacked::before { content:none; }
.modern-countdown-card--stacked .timing-status__span--title {
 font-size:calc(5.5 * var(--modern-unit)); line-height:1.2;
}
.modern-countdown-card--stacked .clock,
.modern-countdown-card--stacked .clock__part {
 font-size:calc(11 * var(--modern-unit)); line-height:1.05;
}
.modern-countdown-card--stacked.modern-countdown-card--hours .clock,
.modern-countdown-card--stacked.modern-countdown-card--hours .clock__part { font-size:calc(9 * var(--modern-unit)); }
@media (max-aspect-ratio:999/1000) {
 .prayertimes-wrapper[data-modern-horizontal="false"] .prayer--active { padding-block:0; }
 .modern-countdown-card--stacked.modern-countdown-card--hours .clock,
 .modern-countdown-card--stacked.modern-countdown-card--hours .clock__part { font-size:calc(11 * var(--modern-unit)); }
}

/* Default-style two-column prayer panels, with the countdown below the grid. */
.prayertimes-wrapper[data-modern-prayer-grid="true"] > .mwaqeet > .prayers {
 display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr));
 gap:calc(1.4 * var(--modern-unit));
}
.prayertimes-wrapper[data-modern-prayer-grid="true"] .prayer {
 width:100%; min-width:0; padding:calc(1 * var(--modern-unit));
 border-radius:calc(3 * var(--modern-unit)); gap:calc(.6 * var(--modern-unit));
}
.prayertimes-wrapper[data-modern-prayer-grid="true"] .prayer__main {
 flex-direction:column; justify-content:center; padding:0; gap:calc(.5 * var(--modern-unit));
}
.prayertimes-wrapper[data-modern-prayer-grid="true"] .prayer__icon {
 order:0; width:calc(6.6 * var(--modern-unit)); height:calc(6.6 * var(--modern-unit)); margin-block:0; flex-basis:auto;
}
.prayertimes-wrapper[data-modern-prayer-grid="true"] .prayer__name {
 order:1; font-size:calc(5.7 * var(--modern-unit)); line-height:1.15; transform:none;
}
.prayertimes-wrapper[data-modern-prayer-grid="true"] .prayer__time,
.prayertimes-wrapper[data-modern-prayer-grid="true"] .prayer__iqama-wait-duration {
 order:2; font-size:calc(7 * var(--modern-unit)); line-height:1.1;
 letter-spacing:calc(-.08 * var(--modern-unit));
}
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-layout="7"] { flex-direction:row; }
 [dir="rtl"] .prayertimes-wrapper[data-modern-layout="7"] { flex-direction:row-reverse; }
 .prayertimes-wrapper[data-modern-layout="8"] { flex-direction:row-reverse; }
 [dir="rtl"] .prayertimes-wrapper[data-modern-layout="8"] { flex-direction:row; }
}
@media (max-aspect-ratio:999/1000) {
 .prayertimes-wrapper[data-modern-prayer-grid="true"] .prayer__name { font-size:calc(5.2 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-prayer-grid="true"] .prayer__time,
 .prayertimes-wrapper[data-modern-prayer-grid="true"] .prayer__iqama-wait-duration { font-size:calc(6.8 * var(--modern-unit)); }
}

.modern-campaign-card .campaign-notification__countdown { color:var(--modern-accent); font-family:'Qomra',sans-serif; font-size:calc(3 * var(--modern-unit)); line-height:1.35; font-weight:700; }
.modern-campaign-card .campaign-notification__title .campaign-notification__countdown { display:inline-block; margin-inline-start:.5em; }

/* Keep the compact notification icon's original layout, updating only its colors. */
.modern-campaign-card .campaign-notification__icon {
 background:var(--modern-accent); color:var(--modern-soft);
}

/* Slide the next full card over the still-visible outgoing card, with no empty phase. */
/* The post-prayer timeline occupies the existing timetable frame in all layouts. */
.prayertimes-wrapper[data-modern-layout] .mwaqeet--athkar > .prayers {
 display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
 gap:calc(1.2 * var(--modern-unit)); overflow:hidden;
}
.modern-athkar__heading {
 flex:0 0 auto; text-align:center; font-family:'Qomra','MasjidiDigits',sans-serif;
 font-size:calc(4 * var(--modern-unit)); line-height:1.3; font-weight:700;
 color:var(--color-text); margin:0;
}
.modern-athkar__body { display:flex; flex:1 1 0; min-width:0; min-height:0; gap:calc(2 * var(--modern-unit)); }
.modern-athkar__rail {
 position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:calc(1.1 * var(--modern-unit));
 flex:0 0 calc(2.9 * var(--modern-unit)); list-style:none; padding:calc(.4 * var(--modern-unit)) calc(.3 * var(--modern-unit)); margin:0; overflow:visible; isolation:isolate;
}
.modern-athkar__rail::before,.modern-athkar__rail::after { content:none; }
.modern-athkar__rail li { position:relative; flex:0 0 auto; display:grid; place-items:center; width:calc(2.9 * var(--modern-unit)); height:calc(2.2 * var(--modern-unit)); }
.modern-athkar__rail li span { position:relative; z-index:1; display:block; box-sizing:border-box; width:calc(1.6 * var(--modern-unit)); height:calc(1.6 * var(--modern-unit)); min-width:calc(1.6 * var(--modern-unit)); min-height:0; border:0; border-radius:9999px; background:var(--modern-accent); opacity:.28; transition:height var(--modern-motion-switch) var(--modern-motion-ease),opacity var(--modern-motion-switch) var(--modern-motion-ease),background-color var(--modern-motion-switch) var(--modern-motion-ease); }
.modern-athkar__rail li.modern-athkar__step--current { margin-block:calc(.8 * var(--modern-unit)); }
.modern-athkar__rail li.modern-athkar__step--current span { height:calc(2.9 * var(--modern-unit)); background:var(--modern-accent); opacity:1; }
@media (prefers-reduced-motion:reduce) { .modern-athkar__rail li span { transition:none; } }
.modern-athkar__stage { position:relative; flex:1 1 0; min-width:0; min-height:0; touch-action:pan-x; user-select:none; cursor:grab; }
.modern-athkar__stage:active { cursor:grabbing; }
.modern-athkar__stage:focus-visible { outline:2px solid var(--color-text); outline-offset:2px; border-radius:calc(1 * var(--modern-unit)); }
.modern-athkar__copy { display:grid; grid-template-rows:repeat(2,minmax(0,1fr)); align-items:center; gap:calc(2 * var(--modern-unit)); width:100%; height:100%; min-width:0; }
.modern-athkar__copy > .modern-athkar__preview { grid-row:1; position:relative; top:0; align-self:start; justify-self:center; }
.modern-athkar__copy > .modern-athkar__current { grid-row:2; height:100%; }
.modern-athkar__current { position:relative; top:var(--modern-athkar-current-offset,0px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(1.2 * var(--modern-unit)); flex:1 1 0; min-height:0; width:100%; }
.modern-athkar__preview { flex:0 0 auto; display:block; width:100%; min-height:0; max-height:none; margin:0; overflow-wrap:anywhere; font:700 calc(5 * var(--modern-unit))/1.45 'Qomra','MasjidiDigits',sans-serif; color:var(--color-text); opacity:.55; text-align:center; }
.modern-athkar__preview { transform:scale(.82); transform-origin:center; }
.modern-athkar__text { flex:0 0 auto; width:100%; max-width:100%; margin:0; text-align:center; overflow-wrap:anywhere; font-family:'Qomra','MasjidiDigits',sans-serif; font-size:calc(6.4 * var(--modern-unit)); line-height:1.45; font-weight:400; color:var(--color-text); }
.modern-athkar__text,.modern-athkar__preview { font-feature-settings:"ss01" 1; letter-spacing:normal; }
.modern-athkar__text { font-weight:700; }
:is(.modern-athkar__footer,.modern-athkar__count) { display:flex; align-items:center; justify-content:center; gap:calc(1 * var(--modern-unit)); min-height:calc(4 * var(--modern-unit)); flex:0 0 auto; font:700 calc(3.3 * var(--modern-unit))/1.2 'Qomra','MasjidiDigits',sans-serif; color:var(--color-text); }
.modern-athkar__count { flex:0 0 auto; font:700 calc(3.3 * var(--modern-unit))/1.2 'Qomra','MasjidiDigits',sans-serif; color:var(--color-text); padding:.18em .7em; background:var(--modern-soft); border-radius:calc(1 * var(--modern-unit)); white-space:nowrap; flex-wrap:nowrap; min-width:max-content; }
:is(.modern-athkar__footer,.modern-athkar__count) { align-self:center; width:fit-content; max-width:100%; padding:.24em .7em; background:var(--modern-accent); color:var(--modern-soft); border:0; border-radius:calc(2 * var(--modern-unit)); box-shadow:none; }
[data-theme="dark"] :is(.modern-athkar__footer,.modern-athkar__count) { color:var(--color-text); }
.modern-athkar__position { display:inline-flex; align-items:center; justify-content:center; gap:.35em; margin-inline:0; padding:0; background:transparent; line-height:1.3; white-space:nowrap; }
.modern-athkar__position-label,.modern-athkar__position-total { font-size:1em; line-height:inherit; font-weight:400; }
.modern-athkar__position-total { display:inline-flex; align-items:center; justify-content:center; gap:.25em; }
.modern-athkar__total-number { display:inline-block; line-height:inherit; }
.modern-athkar__position-total { opacity:.75; }
.modern-athkar__position strong { font-weight:700; font-size:1em; line-height:inherit; }
.prayertimes-wrapper .modern-athkar__position > .modern-optical-label {
 top:var(--modern-optical-label-offset,0em);
}
.modern-athkar__remaining { order:-2; display:flex; align-items:center; justify-content:center; font-family:inherit; font-size:1em; font-variant-numeric:tabular-nums; line-height:1.3; }
.modern-athkar__footer::after { content:''; order:-1; align-self:center; height:1em; border-inline-start:1px solid var(--modern-card-line); }
/* Center every footer token in one optical row: current, total, divider and timer. */
.modern-athkar__footer { align-items:center; line-height:1; }
.modern-athkar__footer > :is(.modern-athkar__position,.modern-athkar__remaining) { align-self:center; min-height:1.3em; }
.modern-athkar__position,
.modern-athkar__position-total,
.modern-athkar__position strong,
.modern-athkar__position-total > span,
.modern-athkar__remaining {
 display:inline-flex; align-items:center; justify-content:center; line-height:1; height:1.3em;
}
.modern-athkar__footer::after { align-self:center; margin-block:0; }
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-horizontal="true"] > .mwaqeet.mwaqeet--athkar { flex-basis:calc(40 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-horizontal="true"][data-modern-athkar="true"] > .info > .modern-header { margin-inline-end:0; }
 .prayertimes-wrapper[data-modern-layout="5"][data-modern-athkar="true"] > .modern-countdown-card { inset-block-start:calc(38 * var(--modern-unit)); }
}
@media (max-aspect-ratio:999/1000) {
 .prayertimes-wrapper[data-modern-horizontal="true"] > .mwaqeet.mwaqeet--athkar { flex-basis:calc(66 * var(--modern-unit)); }
}
.modern-athkar-slide-enter-active,.modern-athkar-slide-leave-active { transition:opacity var(--modern-motion-switch) var(--modern-motion-ease),transform var(--modern-motion-switch) var(--modern-motion-ease); }
.modern-athkar-slide-leave-active { position:absolute; inset:0; pointer-events:none; }
.modern-athkar-slide-enter-from { opacity:0; transform:translateY(-25%); }
.modern-athkar-slide-leave-to { opacity:0; transform:translateY(25%); }
@media (prefers-reduced-motion:reduce) {
 .modern-athkar-slide-enter-active,.modern-athkar-slide-leave-active { transition:none; }
 .modern-athkar-slide-enter-from,.modern-athkar-slide-leave-to { transform:none; }
}

.modern-campaign-stage { position:relative; width:100%; flex:0 0 auto; min-height:0; transition:height var(--modern-motion-switch) var(--modern-motion-ease); }
.modern-campaign-card.modern-campaign-enter-active { z-index:1; transition:opacity var(--modern-motion-switch) var(--modern-motion-ease),transform var(--modern-motion-switch) var(--modern-motion-ease); will-change:opacity,transform; }
.modern-campaign-stage > .modern-campaign-card.modern-campaign-leave-active { position:absolute; top:0; left:0; width:100%; z-index:0; transition:opacity var(--modern-motion-switch) var(--modern-motion-ease); will-change:opacity; pointer-events:none; }
.modern-campaign-card.modern-campaign-enter-from { opacity:0; transform:translateY(100%); }
.modern-campaign-card.modern-campaign-leave-to { opacity:0; transform:none; }
.modern-campaign-card.modern-campaign-enter-to,
.modern-campaign-card.modern-campaign-leave-from { opacity:1; transform:translateY(0); }
/* A single prayer card contains both the prayer list and its countdown footer. */
.prayertimes-wrapper[data-modern-layout] > .mwaqeet {
 display:flex; flex-direction:column; gap:calc(2 * var(--modern-unit));
 padding:calc(2.7 * var(--modern-unit));
 border:max(1.5px,calc(.14 * var(--modern-unit))) solid var(--modern-card-line);
 border-radius:calc(3 * var(--modern-unit)); background:var(--color-ui);
 box-shadow:0 calc(1.5 * var(--modern-unit)) calc(4 * var(--modern-unit)) calc(-2 * var(--modern-unit)) rgba(0,0,0,.16);
}
.prayertimes-wrapper[data-modern-layout] > .mwaqeet > .prayers {
 flex:1 1 0; height:auto; min-height:0; min-width:0;
 padding:0; border:0; border-radius:0; background:transparent; box-shadow:none;
}
.prayertimes-wrapper[data-modern-layout] > .mwaqeet > .modern-countdown-card {
 position:relative; inset:auto; margin:0; width:100%; padding-inline:calc(3 * var(--modern-unit)); box-shadow:none; border:0;
}
.prayertimes-wrapper[data-modern-horizontal="true"] > .info > .modern-header { margin-inline-end:0; }
.prayertimes-wrapper[data-modern-horizontal="true"] > .mwaqeet { padding:calc(2 * var(--modern-unit)); }
.prayertimes-wrapper[data-modern-horizontal="true"]:not([data-modern-athkar="true"]) > .mwaqeet { flex-basis:calc(38 * var(--modern-unit)); }
.prayertimes-wrapper[data-modern-horizontal="true"] .mwaqeet .modern-countdown-card .timing-status__span--title { font-size:calc(4.5 * var(--modern-unit)); line-height:1.2; }
.prayertimes-wrapper[data-modern-horizontal="true"] .modern-countdown-card::before { content:''; background:var(--color-bright_text); opacity:.10; }
.prayertimes-wrapper[data-modern-horizontal="true"] .modern-countdown-card .clock,
.prayertimes-wrapper[data-modern-horizontal="true"] .modern-countdown-card .clock__part { font-size:calc(9 * var(--modern-unit)); }
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-horizontal="true"] > .mwaqeet > .modern-countdown-card { flex-basis:calc(11 * var(--modern-unit)); min-height:calc(11 * var(--modern-unit)); }
}
@media (max-aspect-ratio:999/1000) {
 .prayertimes-wrapper[data-modern-horizontal="true"]:not([data-modern-athkar="true"]) > .mwaqeet { flex-basis:calc(70 * var(--modern-unit)); }
}
@supports (color:color-mix(in srgb,black,white)) {
 [data-theme="dark"] .prayertimes-wrapper[data-modern-layout] > .mwaqeet { background:color-mix(in srgb,var(--color-text) 3%,var(--color-ui)); }
}
@media (prefers-reduced-motion:reduce) {
 .modern-campaign-stage,
 .modern-campaign-card.modern-campaign-enter-active,
 .modern-campaign-card.modern-campaign-leave-active { transition:none; }
 .modern-campaign-card.modern-campaign-enter-from,
 .modern-campaign-card.modern-campaign-leave-to { transform:none; }
}

/* Qomra short-label optical alignment: measured per text and font size.
   Position preserves layout dimensions and existing multiline line heights.
   Reset historical manual transforms so corrections are never added twice. */
.prayertimes-wrapper .modern-optical-label {
 position:relative; top:var(--modern-optical-label-offset,0em); transform:none;
}
.prayertimes-wrapper .timing-status__span--title { transform:none; }
/* Shared TV elevation: a defined contact shadow and a soft, compact falloff.
   Keep the nested countdown flush with its parent prayer card. */
body {
 --modern-card-shadow:0 calc(.25 * var(--modern-unit)) calc(.65 * var(--modern-unit)) calc(-.1 * var(--modern-unit)) rgba(24,20,16,.16),
  0 calc(.8 * var(--modern-unit)) calc(2.2 * var(--modern-unit)) calc(-.6 * var(--modern-unit)) rgba(24,20,16,.25);
 --modern-qr-shadow:0 calc(.15 * var(--modern-unit)) calc(.35 * var(--modern-unit)) rgba(0,0,0,.12),
  0 calc(.45 * var(--modern-unit)) calc(1.1 * var(--modern-unit)) calc(-.15 * var(--modern-unit)) rgba(0,0,0,.23);
}
[data-theme="dark"] body {
 --modern-card-shadow:0 calc(.25 * var(--modern-unit)) calc(.7 * var(--modern-unit)) calc(-.1 * var(--modern-unit)) rgba(0,0,0,.35),
  0 calc(.8 * var(--modern-unit)) calc(2.2 * var(--modern-unit)) calc(-.6 * var(--modern-unit)) rgba(0,0,0,.45);
}
.prayertimes-wrapper[data-modern-layout] > .mwaqeet,
.modern-header,
.modern-message,
.modern-notifications-card,
.info .modern-campaign-card,
.splash { box-shadow:var(--modern-card-shadow); }
.campaign-notification__qr,
.modern-notifications-card .notification__qr-details .notification__qr { box-shadow:var(--modern-qr-shadow); }
/* Hadith-fit measures the visible clearance below the heading, including tashkeel. */
.modern-hadith-copy > .sanad + .content {
 margin-block-start:0;
 padding-block-start:calc(.5 * var(--modern-unit));
}

/* Style 4 gives the Hadith and announcement badges stronger visual presence. */
[data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.modern-message > .modern-corner-icon,.modern-notifications-card .modern-corner-icon) {
 width:calc(9.5 * var(--modern-unit));
 height:calc(9.5 * var(--modern-unit));
 padding:calc(1.55 * var(--modern-unit));
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.modern-message,.modern-notifications-card .notification__content) {
 padding-inline-start:calc(15.2 * var(--modern-unit));
}
@media (min-aspect-ratio:1/1) {
 [data-theme] .prayertimes-wrapper[data-modern-style="4"][data-modern-horizontal="true"] :is(.modern-message > .modern-corner-icon,.modern-notifications-card .modern-corner-icon) {
  width:calc(6 * var(--modern-unit));
  height:calc(6 * var(--modern-unit));
  padding:calc(1 * var(--modern-unit));
 }
 [data-theme] .prayertimes-wrapper[data-modern-style="4"][data-modern-horizontal="true"] :is(.modern-message,.modern-notifications-card .notification__content) {
  padding-inline-start:calc(11.5 * var(--modern-unit));
 }
}
/* A quiet inset weather surface; keep artwork sizing and header height intact. */
.city-weather__reading.modern-weather-reading { isolation:isolate; }
.city-weather__reading.modern-weather-reading::before {
 content:''; position:absolute; inset:calc(.8 * var(--modern-unit)) 0;
 border-radius:calc(2 * var(--modern-unit)); background:var(--modern-soft);
 z-index:-1; pointer-events:none;
}
/* Align the reading start with the Hadith card, including event-badge slides. */
.prayertimes-wrapper { --modern-content-top-space:calc(4 * var(--modern-unit)); }
.prayertimes-wrapper[data-modern-layout] .modern-notifications-card .notification__content {
 padding-top:var(--modern-content-top-space);
}
.prayertimes-wrapper[data-modern-layout] .modern-notifications-card .notification__content .notification__copy {
 padding-top:0;
}
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-horizontal="true"] { --modern-content-top-space:calc(2.5 * var(--modern-unit)); }
}

/* Reuse the Hadith ornament behind post-prayer adhkar, without affecting layout. */
.prayertimes-wrapper .mwaqeet--athkar { position:relative; isolation:isolate; overflow:hidden; }
.prayertimes-wrapper .mwaqeet--athkar > .prayers { position:relative; z-index:1; }
.splash.modern-post-prayer-splash { isolation:isolate; overflow:hidden; }
.splash > .splash__prayer.modern-iqamah {
  width:100%; height:100%; box-sizing:border-box; padding:4%;
  position:relative; display:grid; place-items:center; text-align:center;
  color:var(--color-text);
}
.modern-iqamah__verse {
  color:var(--color-darker_text);
  margin:0; font-family:'Qomra',sans-serif; font-feature-settings:'ss01' 1;
  position:relative; width:max-content; text-align:start;
  font-size:calc(9 * var(--modern-unit)); font-weight:500; line-height:1.35;
}
.modern-iqamah__verse > span {
  position:absolute; inset-inline-start:0; bottom:calc(100% - .16em); white-space:nowrap;
}
.modern-iqamah__verse strong {
  display:block; font-size:2em; font-weight:700; line-height:1.15;
}
.splash > .modern-iqamah > .modern-iqamah__silent {
  position:absolute; bottom:4%; left:4%; right:4%;
  display:flex; align-items:center; justify-content:center; gap:.55em;
  text-align:center; opacity:.8;
  font-size:calc(3.2 * var(--modern-unit)); line-height:1.45;
}
.modern-iqamah__silent > svg {
  display:block; flex:none; width:1.2em; height:1.5em;
}
.splash > .splash__azkar { position:relative; z-index:1; }

/* Prayer-aware post-prayer overview. This replaces the fixed SVG so the
   prayer name and its specific adhkar are readable from TV distance. */
.splash > .splash__azkar.modern-post-prayer-overview {
  --reading-unit:var(--modern-unit);
  box-sizing:border-box;
  width:100%; height:100%;
  padding:calc(3.5 * var(--reading-unit)) 4.8%;
  display:flex; flex-direction:column; justify-content:flex-start;
  gap:calc(3 * var(--reading-unit));
  color:var(--color-text);
}
.modern-post-prayer-overview__header { flex:none; text-align:center; }
.modern-post-prayer-overview__header h1 {
  margin:0; font:inherit; font-weight:700;
  font-size:calc(5.1 * var(--reading-unit)); line-height:1.28;
}
.modern-post-prayer-overview__header h1,
.modern-post-prayer-overview__reading li {
  font-family:'Qomra','MasjidiDigits',sans-serif;
  font-feature-settings:"ss01" 1;
}
.modern-post-prayer-overview__reading {
  flex:none;
  width:100%; box-sizing:border-box; margin:0; padding:0;
  columns:2; column-gap:6%; column-fill:balance;
  text-align:start; list-style:none;
  font-size:calc(4.35 * var(--reading-unit)); line-height:1.43; font-weight:500;
}
.modern-post-prayer-overview__reading li {
  position:relative; break-inside:avoid; padding-inline-start:.68em;
  padding-block:.14em;
}
.modern-post-prayer-overview__reading li::before {
  content:""; position:absolute; inset-inline-start:.05em; top:.77em;
  width:.17em; height:.17em; border-radius:50%; background:currentColor; opacity:.65;
}
.modern-post-prayer-overview__reading small {
  display:inline-block; vertical-align:middle; white-space:nowrap;
  margin-inline-start:.6em; margin-block:.18em;
  border-radius:.5em; padding:.15em .5em;
  background:var(--modern-soft); font-size:.64em; font-weight:700; line-height:1.25;
}
@media (max-aspect-ratio:1/1) {
  .splash > .splash__azkar.modern-post-prayer-overview {
    padding:calc(4 * var(--reading-unit)) 6%;
  }
  .modern-post-prayer-overview__reading { columns:1; font-size:calc(4.7 * var(--reading-unit)); }
}
/* Adhkar leaves upward while the timetable returns, sharing the page motion token. */
.prayertimes-wrapper > .mwaqeet > .prayers { position:relative; }
.modern-athkar-view { display:flex; flex-direction:column; flex:1 1 0; min-width:0; min-height:0; width:100%; gap:calc(1.2 * var(--modern-unit)); }
.modern-athkar-view.modern-athkar-slide-leave-active { z-index:2; }
.mwaqeet--athkar-exiting { position:relative; isolation:isolate; overflow:hidden; }
.mwaqeet--athkar-exiting > .prayers { z-index:1; }
.mwaqeet--athkar-exiting .prayer,
.mwaqeet--athkar-exiting .modern-countdown-card { animation:modern-prayers-return var(--modern-motion-switch) var(--modern-motion-ease) both; }
@keyframes modern-prayers-return { from { opacity:0; transform:translateY(-25%); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .mwaqeet--athkar-exiting .prayer,.mwaqeet--athkar-exiting .modern-countdown-card { animation:none; } }

/* Style 2: the original legacy ornament unifies the existing layout in one frame.
   Its corner.svg and tip.svg are already bundled, including downloaded screens. */
.prayertimes-wrapper[data-modern-style="8"] {
 --prop-border_radius:4vmax;
 --prop-border_width:.2026vmax;
 --modern-style-countdown-height:calc(14 * var(--modern-unit));
 --color-pattern:var(--color-border);
 --classic-frame-surface:var(--color-ui);
 padding:calc(3 * var(--modern-unit));
 border-radius:var(--prop-border_radius);
 box-shadow:none;
}
@supports (color:color-mix(in srgb,black,white)) {
 .prayertimes-wrapper[data-modern-style="8"] {
  --color-pattern:color-mix(in srgb,var(--color-darker_text) 12%,var(--color-ui));
  --classic-frame-surface:var(--color-ui);
 }
 body:has(.prayertimes-wrapper[data-modern-style="8"]) {
  background-color:var(--color-ui);
  background-image:
   radial-gradient(ellipse 55% 72% at 8% 10%,color-mix(in srgb,var(--color-darker_text) 7%,transparent),transparent 74%),
   radial-gradient(ellipse 48% 62% at 94% 88%,color-mix(in srgb,var(--color-border) 6%,transparent),transparent 76%);
 }
 body:has(.prayertimes-wrapper[data-modern-style="8"]) .modern-page-pattern {
  --color-pattern:color-mix(in srgb,var(--color-darker_text) 12%,var(--color-ui));
 }
}
.modern-legacy-frame { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; overflow:visible; }
.prayertimes-wrapper[data-modern-style="8"][data-modern-layout] > .mwaqeet,
.prayertimes-wrapper[data-modern-style="8"][data-modern-layout] > .info,
.prayertimes-wrapper[data-modern-style="8"][data-modern-layout] .modern-header,
.prayertimes-wrapper[data-modern-style="8"][data-modern-layout] .modern-message,
.prayertimes-wrapper[data-modern-style="8"][data-modern-layout] .modern-notifications-card,
.prayertimes-wrapper[data-modern-style="8"][data-modern-layout] .modern-campaign-card,
.prayertimes-wrapper[data-modern-style="8"][data-modern-layout] .splash {
 background:transparent; border-color:transparent; box-shadow:none;
}
.prayertimes-wrapper[data-modern-style="8"][data-modern-layout] > .mwaqeet > .prayers {
 background:transparent; border:0; box-shadow:none;
}
.prayertimes-wrapper[data-modern-style="8"][data-modern-layout] .modern-notifications-card,
.prayertimes-wrapper[data-modern-style="8"][data-modern-layout] .modern-campaign-card {
 border:calc(.225vmax) solid var(--color-border); border-radius:1.5vmax;
}
.prayertimes-wrapper[data-modern-style="8"] .prayer { background:transparent; background-image:none; }
.prayertimes-wrapper[data-modern-style="8"] .prayer__icon::before { content:none; }
.prayertimes-wrapper[data-modern-style="8"] .prayer--active { border-color:transparent; isolation:isolate; }
.prayertimes-wrapper[data-modern-style="8"][data-modern-prayer-grid="true"] .prayer--active { background:var(--color-subtle); }
.prayertimes-wrapper[data-modern-style="8"] .prayer--active > .prayer__main { position:relative; z-index:1; }
.prayertimes-wrapper[data-modern-style="8"] .prayer__decoration {
 position:absolute; inset:0 12%; width:auto; height:auto;
 background:var(--color-subtle); z-index:0; pointer-events:none;
}
.prayertimes-wrapper[data-modern-style="8"] .prayer__decoration > .swiggly-tip {
 display:block; position:absolute; top:0; height:100%; width:15.789474%;
 fill:var(--color-subtle); pointer-events:none;
}
.prayertimes-wrapper[data-modern-style="8"] .modern-card-pattern { display:none; }
.prayertimes-wrapper[data-modern-style="8"][data-modern-layout] > .mwaqeet { padding:0; }
.prayertimes-wrapper[data-modern-style="8"][data-modern-horizontal="true"]:not([data-modern-athkar="true"]) > .mwaqeet {
 flex-basis:calc(32 * var(--modern-unit));
}
.prayertimes-wrapper[data-modern-style="8"] > .mwaqeet > .modern-countdown-card {
 width:calc(100% - 1.38 * var(--modern-style-countdown-height));
 align-self:center; margin-inline:auto; border-radius:0;
 background:var(--modern-accent); overflow:visible; padding-inline:calc(1 * var(--modern-unit));
}
.prayertimes-wrapper[data-modern-style="8"] .modern-countdown-card > .swiggly-tip {
 display:block; position:absolute; top:0; width:auto; height:100%;
 fill:var(--modern-accent); pointer-events:none; z-index:0;
}
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-style="8"][data-modern-horizontal="true"] {
  --modern-style-countdown-height:calc(11 * var(--modern-unit));
 }
}
@media (max-aspect-ratio:999/1000) {
 .prayertimes-wrapper[data-modern-style="8"][data-modern-horizontal="true"]:not([data-modern-athkar="true"]) > .mwaqeet {
  flex-basis:calc(64 * var(--modern-unit));
 }
}

/* Keep compact framed TV layouts readable without squeezing their prayer rows. */
.prayertimes-wrapper[data-modern-style="8"] .modern-message { padding-block-end:calc(2 * var(--modern-unit)); }
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-style="8"][data-modern-horizontal="true"]:not([data-modern-athkar="true"]) > .mwaqeet {
  flex-basis:calc(33 * var(--modern-unit));
 }
 .prayertimes-wrapper[data-modern-style="8"][data-modern-horizontal="true"] .prayer { padding-block:0; }
 .prayertimes-wrapper[data-modern-style="8"][data-modern-horizontal="true"] .prayer__main { gap:0; }
 .prayertimes-wrapper[data-modern-style="8"][data-modern-horizontal="true"] .prayer__time,
 .prayertimes-wrapper[data-modern-style="8"][data-modern-horizontal="true"] .prayer__iqama-wait-duration { transform:none; margin-block-start:calc(.85 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="8"][data-modern-horizontal="true"] .modern-message { padding-block-end:0; }
 .prayertimes-wrapper[data-modern-style="8"][data-modern-horizontal="true"] .modern-header .date-time { padding-top:0; }
 .prayertimes-wrapper[data-modern-style="8"][data-modern-horizontal="true"] .modern-header .localtime { font-size:calc(9 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="8"][data-modern-horizontal="true"] .modern-header .date { font-size:calc(4 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="8"][data-modern-horizontal="true"] .modern-header #masjid_logo { height:calc(12 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="8"][data-modern-horizontal="true"] .notification__copy.notification__copy--status {
  display:grid; grid-template-columns:auto minmax(0,1fr); align-content:start; align-items:center;
  column-gap:calc(1.5 * var(--modern-unit));
 }
 .prayertimes-wrapper[data-modern-style="8"][data-modern-horizontal="true"] .notification__copy--status > .notification__event-meta { grid-column:1; grid-row:1; }
 .prayertimes-wrapper[data-modern-style="8"][data-modern-horizontal="true"] .notification__copy--status > .notification__header { grid-column:2; grid-row:1; min-width:0; }
 .prayertimes-wrapper[data-modern-style="8"][data-modern-horizontal="true"] .notification__copy--status > :not(.notification__event-meta):not(.notification__header) { grid-column:1 / -1; }
}
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="8"] .prayer:not(.prayer--active) .prayer__image {
 color:var(--color-text);
 color:color-mix(in srgb,var(--modern-accent) 55%,var(--color-text));
 opacity:1;
}

.modern-solar-header > .solar__canvas { display:block; width:100%; height:100%; }

/* Approved prayer-icon motion: only the highlighted prayer animates. Artwork and badges stay fixed. */
.prayer__image .modern-prayer-motion-spin{transform-box:view-box;transform-origin:50px 50px}
.prayertimes-wrapper .prayer--active .prayer__image .modern-prayer-motion-spin{animation:modern-prayer-spin 24s linear infinite}
.prayertimes-wrapper .prayer--active .prayer__image .modern-prayer-motion-arrow{animation:modern-prayer-arrow 4.8s ease-in-out infinite}
.prayertimes-wrapper .prayer--active .prayer__image .modern-prayer-motion-ray{animation:modern-prayer-ray 4.8s ease-in-out infinite;animation-delay:var(--modern-prayer-phase)}
.prayertimes-wrapper .prayer--active .prayer__image .modern-prayer-motion-spark{animation:modern-prayer-spark 4.8s ease-in-out infinite;animation-delay:var(--modern-prayer-phase)}
@keyframes modern-prayer-spin{to{transform:rotate(360deg)}
}
@keyframes modern-prayer-arrow{0%{transform:translateY(var(--modern-prayer-enter));opacity:0}
8%{opacity:1}
20%,55%{transform:translateY(0);opacity:1}
78%{transform:translateY(var(--modern-prayer-exit));opacity:0}
79%,100%{transform:translateY(var(--modern-prayer-enter));opacity:0}
}
@keyframes modern-prayer-ray{0%,15%,100%{opacity:1}
35%,50%{opacity:0}
75%{opacity:1}
}
@keyframes modern-prayer-spark{0%,20%,100%{opacity:1}
35%,50%{opacity:0}
70%{opacity:1}
}
@media (prefers-reduced-motion:reduce) { .prayertimes-wrapper .prayer__image [class^="modern-prayer-motion-"] { animation:none !important; } }
/* Keep the original artwork size and compact header; only separate the reading. */
.prayertimes-wrapper[data-modern-style="7"] .city-weather__reading.modern-weather-reading { gap:calc(.4 * var(--modern-unit)); }
.prayertimes-wrapper[data-modern-style="7"] .city-weather__reading.modern-weather-reading > span.modern-weather-temperature { transform:translateY(calc(-.5 * var(--modern-unit))); }
@media (max-aspect-ratio:999/1000) {
 .prayertimes-wrapper[data-modern-style="7"] .city-weather__reading.modern-weather-reading { gap:calc(.7 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="7"] .city-weather__reading.modern-weather-reading > span.modern-weather-temperature { transform:none; }
}/* Landscape: slightly larger weather artwork with a tighter temperature gap. */
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-style="7"] .modern-weather-reading .city-weather__icon--realistic { width:calc(14 * var(--modern-unit)); height:calc(14 * var(--modern-unit)); flex-basis:calc(14 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="7"] .city-weather__reading.modern-weather-reading { gap:calc(.2 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="7"] .city-weather__reading.modern-weather-reading > span.modern-weather-temperature { transform:translateY(calc(-.9 * var(--modern-unit))); }
}
/* Inset the weather surface evenly; preserve artwork and reading geometry. */
.prayertimes-wrapper[data-modern-style="7"] .city-weather__reading.modern-weather-reading::before {
 inset:calc(1.4 * var(--modern-unit)) calc(.6 * var(--modern-unit));
}
/* Classic current prayer: a simple rounded highlight in every layout. */
.prayertimes-wrapper[data-modern-style="8"] .prayer.prayer--active {
 background:var(--color-subtle); background-image:none;
 border-color:transparent; border-radius:calc(3 * var(--modern-unit));
}
.prayertimes-wrapper[data-modern-style="8"] .prayer--active .prayer__decoration { display:none; }
/* Lift Classic information group slightly within its shared frame. */
.prayertimes-wrapper[data-modern-style="8"] > .info { position:relative; top:calc(-1 * var(--modern-unit)); }
.prayertimes-wrapper[data-modern-style="8"][data-modern-layout="6"] > .info { top:auto; }
.prayertimes-wrapper[data-modern-style="8"][data-modern-layout="6"] > .info > * { position:relative; top:calc(-1 * var(--modern-unit)); }
/* Classic frame and panel borders retain the portal Border role. */
/* Classic stacked prayers: tighter row gaps and clearance above the bottom frame. */
.prayertimes-wrapper[data-modern-style="8"][data-modern-horizontal="false"]:not([data-modern-athkar="true"]) > .mwaqeet {
 padding-block-end:calc(2.5 * var(--modern-unit));
 gap:calc(1.2 * var(--modern-unit));
}
.prayertimes-wrapper[data-modern-style="8"][data-modern-horizontal="false"]:not([data-modern-athkar="true"]) > .mwaqeet > .prayers {
 gap:calc(.5 * var(--modern-unit));
}
/* Classic weather sits directly on the shared frame. */
.prayertimes-wrapper[data-modern-style="8"] .city-weather__reading.modern-weather-reading::before { content:none; }
/* Classic bordered announcement and notification surfaces match the main frame. */
.prayertimes-wrapper[data-modern-style="8"][data-modern-layout] .modern-notifications-card,
.prayertimes-wrapper[data-modern-style="8"][data-modern-layout] .modern-campaign-card {
 background:var(--color-ui);
}
/* Match the raised Classic content's bottom clearance at its outer reading edge. */
.prayertimes-wrapper[data-modern-style="8"] > .info {
 padding-inline-start:calc(1 * var(--modern-unit));
}
/* Layout 6 flattens the info wrapper; apply its clearance to the visible panels. */
.prayertimes-wrapper[data-modern-style="8"][data-modern-layout="6"] > .info > .modern-content-stage {
 margin-inline:calc(1 * var(--modern-unit));
}
/* Classic announcements reuse Modern's existing faded pattern layer. */
.prayertimes-wrapper[data-modern-style="8"] .modern-notifications-card > .modern-card-pattern { display:block; }

/* Solar Horizon lives exclusively in the prayer card's header. */
.prayertimes-wrapper[data-modern-style="9"] > .mwaqeet > .modern-solar-header {
 position:relative; inset:auto; width:100%; height:calc(17 * var(--modern-unit)); flex:0 0 calc(17 * var(--modern-unit));
 min-height:0; overflow:hidden; border-radius:calc(2 * var(--modern-unit)); contain:size;
 background:color-mix(in srgb,var(--color-darker_text) 30%,var(--color-background));
}
.modern-solar-caption { position:absolute; inset-inline:7%; bottom:calc(1.1 * var(--modern-unit)); display:flex; align-items:center; justify-content:space-between; gap:1em; color:#fff; font-size:calc(2.8 * var(--modern-unit)); line-height:1.3; text-shadow:0 1px 3px #1118; }
.modern-solar-caption > :last-child { font-family:MasjidiDigits,Qomra,sans-serif; direction:ltr; font-size:.85em; }
.prayertimes-wrapper[data-modern-style="9"] .modern-card-pattern { display:none; }
.prayertimes-wrapper[data-modern-style="9"] {
 --color-pattern:var(--color-border);
 box-shadow:0 0 0 100vmax var(--color-ui);
}
@supports (color:color-mix(in srgb,black,white)) {
 .prayertimes-wrapper[data-modern-style="9"] {
  --color-pattern:color-mix(in srgb,var(--color-darker_text) 12%,var(--color-ui));
 }
}
.prayertimes-wrapper[data-modern-style="9"]
 :is(.modern-message,.modern-notifications-card) > .modern-card-pattern {
 display:block;
}
.prayertimes-wrapper[data-modern-style="9"] .prayer { background:transparent; }
.prayertimes-wrapper[data-modern-style="9"] .prayer.prayer--active { background:var(--modern-soft); border-color:var(--modern-accent); }
.prayertimes-wrapper[data-modern-style="9"][data-modern-horizontal="false"]:not([data-modern-prayer-grid="true"]) .prayer__name { font-size:calc(5.2 * var(--modern-unit)); line-height:1.1; }
.prayertimes-wrapper[data-modern-style="9"][data-modern-horizontal="false"]:not([data-modern-prayer-grid="true"]) .prayer__time { font-size:calc(6 * var(--modern-unit)); line-height:1.05; transform:none; }
.prayertimes-wrapper[data-modern-style="9"][data-modern-horizontal="false"]:not([data-modern-prayer-grid="true"]) .prayer__icon { width:calc(5.5 * var(--modern-unit)); height:calc(5.5 * var(--modern-unit)); flex-basis:calc(5.5 * var(--modern-unit)); }
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="9"] .prayer__image { color:var(--color-text); opacity:.8; }
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="9"] .prayer--active .prayer__image { opacity:1; }
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="9"] .prayer.prayer--active { border-color:var(--modern-card-line); }
/* Horizontal strips reserve room for the new header, without touching the other styles. */
.prayertimes-wrapper[data-modern-style="9"][data-modern-horizontal="true"]:not([data-modern-athkar="true"]) > .mwaqeet { flex-basis:calc(50 * var(--modern-unit)); }
.prayertimes-wrapper[data-modern-style="9"][data-modern-horizontal="true"] > .mwaqeet > .modern-solar-header { height:calc(12 * var(--modern-unit)); flex-basis:calc(12 * var(--modern-unit)); }
@media (max-aspect-ratio:999/1000) {
 .prayertimes-wrapper[data-modern-style="9"][data-modern-horizontal="true"]:not([data-modern-athkar="true"]) > .mwaqeet { flex-basis:calc(82 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="9"][data-modern-horizontal="false"]:not([data-modern-athkar="true"]) > .mwaqeet { flex-basis:calc(91 * var(--modern-unit)); }
}
.prayertimes-wrapper[data-modern-style="9"][data-modern-prayer-grid="true"] .prayer__main { display:grid; grid-template-columns:calc(5 * var(--modern-unit)) minmax(0,1fr); grid-template-rows:auto auto; align-items:center; gap:0 calc(1 * var(--modern-unit)); width:100%; }
.prayertimes-wrapper[data-modern-style="9"][data-modern-prayer-grid="true"] .prayer__icon { grid-column:1; grid-row:1 / 3; width:calc(5 * var(--modern-unit)); height:calc(5 * var(--modern-unit)); }
.prayertimes-wrapper[data-modern-style="9"][data-modern-prayer-grid="true"] .prayer__name { grid-column:2; grid-row:1; font-size:calc(4.6 * var(--modern-unit)); line-height:1.1; transform:none; justify-self:center; }
.prayertimes-wrapper[data-modern-style="9"][data-modern-prayer-grid="true"] .prayer__time { grid-column:2; grid-row:2; font-size:calc(5.5 * var(--modern-unit)); line-height:1.05; transform:none; justify-content:center; }
/* The Solar sky meets the prayer card edges; the rows retain their inner padding. */
.prayertimes-wrapper[data-modern-style="9"] > .mwaqeet { --solar-card-inset:calc(2.7 * var(--modern-unit)); padding:var(--solar-card-inset); }
.prayertimes-wrapper[data-modern-style="9"][data-modern-horizontal="true"] > .mwaqeet { --solar-card-inset:calc(2 * var(--modern-unit)); }
.prayertimes-wrapper[data-modern-style="9"] > .mwaqeet > .modern-solar-header {
 margin-block-start:calc(-1 * var(--solar-card-inset)); margin-inline:calc(-1 * var(--solar-card-inset));
 width:calc(100% + 2 * var(--solar-card-inset));
 border-radius:inherit; border-end-start-radius:0; border-end-end-radius:0;
}
/* Pin Modern's original card treatment independently of Classic and Solar. */
.prayertimes-wrapper[data-modern-style="7"] { --modern-card-line:color-mix(in srgb,var(--color-text) 34%,var(--color-ui)); }
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="7"] { --modern-card-line:color-mix(in srgb,var(--color-text) 36%,var(--color-ui)); }
.prayertimes-wrapper[data-modern-style="7"][data-modern-layout] > .mwaqeet,
.prayertimes-wrapper[data-modern-style="7"] .modern-header,
.prayertimes-wrapper[data-modern-style="7"] .modern-message,
.prayertimes-wrapper[data-modern-style="7"] .modern-notifications-card,
.prayertimes-wrapper[data-modern-style="7"] .modern-campaign-card {
 border:2px solid var(--modern-card-line);
 border-radius:calc(3 * var(--modern-unit));
}
/* Modern-only elevation: a soft ambient falloff and a restrained contact edge. */
.prayertimes-wrapper[data-modern-style="7"] {
 --modern-card-shadow:0 1px 2px rgba(28,24,20,.08),0 6px 18px -5px rgba(28,24,20,.16);
}
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="7"] {
 --modern-card-shadow:0 1px 3px rgba(0,0,0,.22),0 8px 22px -6px rgba(0,0,0,.38);
}
.prayertimes-wrapper[data-modern-style="7"][data-modern-layout] > .mwaqeet,
.prayertimes-wrapper[data-modern-style="7"] .modern-header,
.prayertimes-wrapper[data-modern-style="7"] .modern-message,
.prayertimes-wrapper[data-modern-style="7"] .modern-notifications-card,
.prayertimes-wrapper[data-modern-style="7"] .modern-campaign-card,
.prayertimes-wrapper[data-modern-style="7"] .splash { box-shadow:var(--modern-card-shadow); }
/* Style 7 current-prayer emphasis: a quiet hairline that belongs to the card palette. */
.prayertimes-wrapper[data-modern-style="7"] .prayer.prayer--active { border-width:1px; }
/* Modern horizontal presets: preserve space for readable message content. */
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-style="7"]:is([data-modern-layout="4"],[data-modern-layout="5"],[data-modern-layout="6"]) .modern-header { padding-block:calc(.7 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="7"]:is([data-modern-layout="4"],[data-modern-layout="5"],[data-modern-layout="6"]) .modern-header #masjid_logo { height:calc(12 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="7"]:is([data-modern-layout="4"],[data-modern-layout="5"],[data-modern-layout="6"]) .modern-header .localtime { font-size:calc(9.5 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="7"]:is([data-modern-layout="4"],[data-modern-layout="5"],[data-modern-layout="6"]) .modern-header .date { margin-top:calc(-2 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="7"]:is([data-modern-layout="4"],[data-modern-layout="5"],[data-modern-layout="6"]) .modern-weather-reading .city-weather__icon--realistic { width:100%; height:100%; max-height:calc(16.5 * var(--modern-unit)); flex-basis:calc(16.5 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="7"]:is([data-modern-layout="4"],[data-modern-layout="5"],[data-modern-layout="6"]):not([data-modern-athkar="true"]) > .mwaqeet { flex-basis:calc(35 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="7"]:is([data-modern-layout="4"],[data-modern-layout="5"],[data-modern-layout="6"]) .notification__content { padding-bottom:calc(11 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="7"]:is([data-modern-layout="4"],[data-modern-layout="5"],[data-modern-layout="6"]) .notification__content--no-qr { padding-bottom:calc(3 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="7"]:is([data-modern-layout="4"],[data-modern-layout="5"],[data-modern-layout="6"]) .notification__qr-details .notification__qr { width:calc(9 * var(--modern-unit)); height:calc(9 * var(--modern-unit)); flex-basis:calc(9 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="7"]:is([data-modern-layout="4"],[data-modern-layout="5"],[data-modern-layout="6"]) .notification__qr-note { font-size:calc(2.5 * var(--modern-unit)); }
}
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-style="7"]:is([data-modern-layout="4"],[data-modern-layout="5"],[data-modern-layout="6"]) .prayer { padding:calc(.5 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="7"]:is([data-modern-layout="4"],[data-modern-layout="5"],[data-modern-layout="6"]) .prayer__main { gap:0; }
 .prayertimes-wrapper[data-modern-style="7"]:is([data-modern-layout="4"],[data-modern-layout="5"],[data-modern-layout="6"]) .prayer__icon { width:calc(4.5 * var(--modern-unit)); height:calc(4.5 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="7"]:is([data-modern-layout="4"],[data-modern-layout="5"],[data-modern-layout="6"]) .prayer__name { font-size:calc(4.3 * var(--modern-unit)); line-height:1.1; }
 .prayertimes-wrapper[data-modern-style="7"]:is([data-modern-layout="4"],[data-modern-layout="5"],[data-modern-layout="6"]) .prayer__time { font-size:calc(5.8 * var(--modern-unit)); line-height:1.05; transform:none; }
}

/* Modern: current prayer artwork and title share the exact same ink token. */
.prayertimes-wrapper[data-modern-style="7"] .prayer.prayer--active .prayer__image {
 color:var(--modern-current-prayer-ink,var(--color-darker_text));
}
/* Modern current-prayer outline follows its title and artwork ink. */
.prayertimes-wrapper[data-modern-style="7"] .prayer.prayer--active {
 border-color:var(--style7-card-edge);
}
/* Modern current-prayer badge shares the title ink; artwork contrasts with its fill. */
.prayertimes-wrapper[data-modern-style="7"] .prayer.prayer--active .prayer__icon::before {
 background:var(--modern-current-prayer-ink,var(--color-darker_text)); opacity:1;
}
.prayertimes-wrapper[data-modern-style="7"] .prayer.prayer--active .prayer__image { color:var(--color-ui); }
/* Modern current-prayer badge: muted title-colored surface and matching artwork. */
.prayertimes-wrapper[data-modern-style="7"] .prayer.prayer--active .prayer__icon::before {
 background:var(--modern-current-prayer-ink,var(--color-darker_text)); opacity:.12;
}
.prayertimes-wrapper[data-modern-style="7"] .prayer.prayer--active .prayer__image {
 color:var(--modern-current-prayer-ink,var(--color-darker_text));
}
/* Modern prayer badges share a consistent muted title-ink surface. */
.prayertimes-wrapper[data-modern-style="7"] .prayer:not(.prayer--active) .prayer__icon::before {
 background:var(--color-text); opacity:.12;
}
/* Modern weather artwork matches the current-prayer title ink. */
.prayertimes-wrapper[data-modern-style="7"] .modern-weather-reading .city-weather__icon--realistic { color:var(--color-darker_text); }
@supports (color:color-mix(in srgb,black,white)) {
 html:not([data-theme="dark"]) .prayertimes-wrapper[data-modern-style="7"] .modern-weather-reading .city-weather__icon--realistic { color:color-mix(in srgb,var(--color-darker_text) 80%,#000); }
}
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="7"] .modern-weather-reading .city-weather__icon--realistic { color:var(--color-text); }
/* Modern post-prayer surface uses the same card treatment as the main screen. */
.prayertimes-wrapper[data-modern-style="7"] > .splash.modern-post-prayer-splash {
 background:var(--color-ui); border:2px solid var(--modern-card-line);
 border-radius:calc(3 * var(--modern-unit)); box-shadow:var(--modern-card-shadow);
}
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="7"] > .splash.modern-post-prayer-splash {
 background:color-mix(in srgb,var(--color-text) 3%,var(--color-ui));
}
/* One compact weather unit: a prominent icon beside a vertically centered reading.
   Its overlay remains independent of the header's content-driven height. */
.prayertimes-wrapper[data-modern-style] .modern-header--weather > .city-weather { width:calc(29 * var(--modern-unit)); }
.prayertimes-wrapper[data-modern-style] .city-weather__reading.modern-weather-reading {
 display:grid; direction:ltr; grid-template-columns:minmax(calc(6.8 * var(--modern-unit)),max-content) minmax(0,calc(16.5 * var(--modern-unit)));
 grid-template-rows:minmax(0,1fr); align-items:center; justify-content:start;
 left:calc(.8 * var(--modern-unit)); width:max-content; max-width:calc(100% - .8 * var(--modern-unit)); height:calc(100% - 1.4 * var(--modern-unit));
 transform:translateY(-50%); padding:0; column-gap:calc(.35 * var(--modern-unit)); row-gap:0;
}
[dir="ltr"] .prayertimes-wrapper[data-modern-style] .city-weather__reading.modern-weather-reading { left:auto; right:calc(.8 * var(--modern-unit)); }
.prayertimes-wrapper[data-modern-style] .modern-weather-reading .city-weather__icon--realistic {
 grid-column:2; grid-row:1; width:100%; height:100%; max-height:calc(16.5 * var(--modern-unit)); min-height:0; align-self:center;
}
.prayertimes-wrapper[data-modern-style] .city-weather__reading.modern-weather-reading > .modern-weather-data {
 grid-column:1; grid-row:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
 align-self:center; gap:calc(.55 * var(--modern-unit)); min-width:0; transform:none;
}
.prayertimes-wrapper[data-modern-style] .modern-weather-data > .modern-weather-temperature {
 display:grid; position:static; inset:auto; min-width:0; margin:0; padding:0; transform:none;
 font-size:calc(6.15 * var(--modern-unit)); line-height:1; font-weight:700; color:var(--color-text);
 font-variant-numeric:tabular-nums;
}
.prayertimes-wrapper[data-modern-style] .modern-weather-data > .modern-weather-detail {
 display:block; min-width:0; max-width:calc(12.4 * var(--modern-unit)); margin:0; padding:0; transform:none;
 font-size:calc(2.65 * var(--modern-unit)); line-height:1.15; font-weight:600; text-align:center;
 white-space:normal; color:color-mix(in srgb,var(--color-text) 72%,transparent);
}
/* Improve second-line readability in notification cards across every style. */
.prayertimes-wrapper[data-modern-style] .modern-campaign-card .campaign-notification__description {
 font-size:calc(4.4 * var(--modern-unit)); line-height:1.3;
}
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-style][data-modern-horizontal="true"] .modern-campaign-card .campaign-notification__description {
  font-size:calc(4.05 * var(--modern-unit));
 }
}
/* Improve QR caption readability while retaining its bold action and vertical alignment. */
.prayertimes-wrapper[data-modern-style] .modern-notifications-card .notification__qr-note {
 font-size:calc(3.3 * var(--modern-unit));
}
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-style][data-modern-horizontal="true"] .modern-notifications-card .notification__qr-note {
  font-size:calc(3 * var(--modern-unit));
 }
}
/* Larger announcement pagination with a clearer active pill. */
.prayertimes-wrapper[data-modern-style] .notification__bullet {
 width:1.6vmin; height:1.6vmin; flex-shrink:0;
}
.prayertimes-wrapper[data-modern-style] .notification__bullet--active { width:2.9vmin; }
/* Modern weather artwork and temperature sit directly on the logo card. */
.prayertimes-wrapper[data-modern-style="7"] .city-weather__reading.modern-weather-reading::before { content:none; }

/* Glass (style 5). An independent material system; no existing style is changed.
   A softly lit environment, frosted reading planes, and a single tinted focal layer.
   Large static blur surfaces only: never animate backdrop-filter on a TV GPU. */
.prayertimes-wrapper[data-modern-glass="true"] {
 --glass-radius:calc(3.6 * var(--modern-unit));
 --glass-surface:var(--color-ui);
 --glass-reading:var(--color-ui);
 --glass-edge:rgba(255,255,255,.7);
 --glass-highlight:rgba(255,255,255,.72);
 --glass-shadow:0 2px 5px rgba(22,30,40,.05),0 14px 36px -16px rgba(22,30,40,.24);
 --glass-ink:var(--modern-ink);
 --glass-tint:var(--modern-accent);
 position:relative;
}
@supports (color:color-mix(in srgb, white, transparent)) {
 .prayertimes-wrapper[data-modern-glass="true"] {
  --glass-surface:color-mix(in srgb,var(--color-ui) 74%,transparent);
  --glass-reading:color-mix(in srgb,var(--color-ui) 86%,transparent);
  --glass-edge:color-mix(in srgb,var(--color-border) 15%,rgba(255,255,255,.68));
  --glass-tint:color-mix(in srgb,var(--color-darker_text) 92%,var(--color-ui));
 }
 [data-theme="dark"] .prayertimes-wrapper[data-modern-glass="true"] {
  --glass-surface:color-mix(in srgb,var(--color-ui) 82%,transparent);
  --glass-reading:color-mix(in srgb,var(--color-ui) 90%,transparent);
  --glass-edge:color-mix(in srgb,var(--color-border) 25%,transparent);
  --glass-highlight:rgba(255,255,255,.16);
  --glass-shadow:0 2px 5px #0002,0 18px 40px -14px #0008;
  --glass-ink:var(--color-text);
 }
}
.prayertimes-wrapper[data-modern-glass="true"] > .modern-glass-ambience {
 position:fixed; inset:0; z-index:-1; pointer-events:none;
 background:var(--color-background);
 background-image:
  radial-gradient(ellipse at 8% 12%,color-mix(in srgb,var(--color-text) 24%,transparent),transparent 54%),
  radial-gradient(ellipse at 92% 90%,color-mix(in srgb,var(--color-darker_text) 20%,transparent),transparent 54%),
  linear-gradient(145deg,color-mix(in srgb,var(--color-ui) 80%,transparent),transparent);
}
/* No second glass sheet behind the content cards. */
.prayertimes-wrapper[data-modern-glass="true"] > .info {
 background:transparent; border:0; box-shadow:none; overflow:visible;
}
.prayertimes-wrapper[data-modern-glass="true"][data-modern-layout] > .mwaqeet,
.prayertimes-wrapper[data-modern-glass="true"] :is(.modern-header,.modern-message,.modern-notifications-card,.modern-campaign-card),
.prayertimes-wrapper[data-modern-glass="true"] > .splash.modern-post-prayer-splash {
 border:1.5px solid var(--glass-edge);
 border-radius:var(--glass-radius);
 background:var(--glass-reading);
 background-image:linear-gradient(150deg,rgba(255,255,255,.10),transparent 35%);
 box-shadow:inset 0 1px 0 var(--glass-highlight),var(--glass-shadow);
 color:var(--glass-ink);
}
.prayertimes-wrapper[data-modern-glass="true"] .modern-header {
 background-color:var(--glass-surface);
 -webkit-backdrop-filter:blur(20px) saturate(125%);
 backdrop-filter:blur(20px) saturate(125%);
}
.prayertimes-wrapper[data-modern-glass="true"] .modern-card-pattern { opacity:.32; }
/* Equal row geometry; the active row is a single inset lens, not a nested card. */
.prayertimes-wrapper[data-modern-glass="true"] .prayer {
 flex:1; background:transparent; background-image:none;
 border:1.5px solid transparent; border-radius:calc(2.5 * var(--modern-unit));
 padding:calc(.6 * var(--modern-unit)) calc(2 * var(--modern-unit));
 gap:calc(1 * var(--modern-unit)); color:var(--glass-ink);
 transition:background-color var(--modern-motion-switch) var(--modern-motion-ease),
  border-color var(--modern-motion-switch) var(--modern-motion-ease),
  box-shadow var(--modern-motion-switch) var(--modern-motion-ease);
}
.prayertimes-wrapper[data-modern-glass="true"] .prayer.prayer--active {
 background:var(--modern-soft);
 background:color-mix(in srgb,var(--color-text) 12%,transparent);
 background-image:linear-gradient(145deg,rgba(255,255,255,.22),transparent 60%);
 border-color:var(--glass-edge);
 box-shadow:inset 0 1px 0 var(--glass-highlight),0 3px 10px -5px rgba(0,0,0,.2);
}
.prayertimes-wrapper[data-modern-glass="true"] .prayer--active .prayer__main { padding-bottom:0; }
.prayertimes-wrapper[data-modern-glass="true"] .prayer :is(.prayer__name,.prayer__time,.prayer__image) { color:var(--glass-ink); }
.prayertimes-wrapper[data-modern-glass="true"] .prayer--active :is(.prayer__name,.prayer__time,.prayer__image) { color:var(--glass-ink); opacity:1; }
.prayertimes-wrapper[data-modern-glass="true"] .prayer__name { font-size:calc(6.4 * var(--modern-unit)); }
.prayertimes-wrapper[data-modern-glass="true"] .prayer__time { font-size:calc(7 * var(--modern-unit)); }
.prayertimes-wrapper[data-modern-glass="true"] .prayer__icon { width:calc(7.2 * var(--modern-unit)); height:calc(7.2 * var(--modern-unit)); flex-basis:calc(7.2 * var(--modern-unit)); }
@media(max-aspect-ratio:999/1000) {
 .prayertimes-wrapper[data-modern-glass="true"]:not([data-modern-horizontal="true"]):not([data-modern-prayer-grid="true"]) .prayer__icon { width:calc(8.2 * var(--modern-unit)); height:calc(8.2 * var(--modern-unit)); flex-basis:calc(8.2 * var(--modern-unit)); }
}
.prayertimes-wrapper[data-modern-glass="true"] .prayer__icon::before { background:var(--color-text); opacity:.07; border-radius:50%; }
.prayertimes-wrapper[data-modern-glass="true"] .prayer--active .prayer__icon::before { opacity:.16; }
/* Countdown is the strongest accent, with a broad optical reflection. Text never blurs. */
.prayertimes-wrapper[data-modern-glass="true"] .modern-countdown-card {
 background:var(--glass-tint); color:var(--color-bright_text);
 background-image:linear-gradient(150deg,rgba(255,255,255,.22),transparent 55%);
 border:1px solid var(--glass-edge); border-radius:calc(2.5 * var(--modern-unit));
 box-shadow:inset 0 1px 0 var(--glass-highlight),0 5px 12px -7px rgba(0,0,0,.25);
}
.prayertimes-wrapper[data-modern-glass="true"] :is(.modern-corner-icon,.campaign-notification__icon,.modern-athkar__footer,.modern-athkar__count) {
 background:var(--modern-soft); background:color-mix(in srgb,var(--color-text) 10%,transparent);
 color:var(--glass-ink); border:1px solid var(--glass-edge);
 border-radius:calc(1.8 * var(--modern-unit));
 box-shadow:inset 0 1px 0 var(--glass-highlight);
}
.prayertimes-wrapper[data-modern-glass="true"] :is(.modern-corner-icon,.campaign-notification__icon) svg { color:inherit; }
.prayertimes-wrapper[data-modern-glass="true"] .city-weather__reading.modern-weather-reading::before { content:none; }
.prayertimes-wrapper[data-modern-glass="true"] .modern-weather-reading .city-weather__icon--realistic { color:var(--glass-ink); }
.prayertimes-wrapper[data-modern-glass="true"] .notification__event-tag {
 background:var(--modern-soft); background:color-mix(in srgb,var(--color-text) 10%,transparent);
 color:var(--glass-ink); border:1px solid var(--glass-edge); box-shadow:inset 0 1px 0 var(--glass-highlight);
}
/* Keep QR quiet zones opaque, independent of the material behind the card. */
.prayertimes-wrapper[data-modern-glass="true"] :is(.notification__qr,.campaign-notification__qr) { background:#fff; }

/* Masjidi Signature QR: branded geometry with a protected opaque scan plate. */
.prayertimes-wrapper[data-modern-style] {
 --modern-qr-ink:color-mix(in srgb,var(--color-darker_text) 58%,#111 42%);
 --modern-qr-paper:color-mix(in srgb,var(--color-ui) 4%,#fff 96%);
}
.prayertimes-wrapper[data-modern-style] :is(.notification__qr,.campaign-notification__qr) {
 background:var(--modern-qr-paper);
 border:max(1px,calc(.12 * var(--modern-unit))) solid color-mix(in srgb,var(--color-border) 34%,transparent);
 border-radius:calc(1.25 * var(--modern-unit));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 calc(.5 * var(--modern-unit)) calc(1.4 * var(--modern-unit)) color-mix(in srgb,var(--color-border) 18%,transparent);
}
.prayertimes-wrapper[data-modern-style] .modern-signature-qr__paper,
.prayertimes-wrapper[data-modern-style] .modern-signature-qr__finder-cutout { fill:var(--modern-qr-paper); }
.prayertimes-wrapper[data-modern-style] :is(.modern-signature-qr__module,.modern-signature-qr__finder-outer,.modern-signature-qr__finder-core) { fill:var(--modern-qr-ink); }
.prayertimes-wrapper[data-modern-style] .modern-signature-qr { overflow:visible; }
.prayertimes-wrapper[data-modern-glass="true"][data-modern-horizontal="true"] .prayer { padding:calc(.5 * var(--modern-unit)); }
.prayertimes-wrapper[data-modern-glass="true"][data-modern-horizontal="true"] .prayer__main { gap:0; }
.prayertimes-wrapper[data-modern-glass="true"][data-modern-horizontal="true"] .prayer__name { font-size:calc(4.7 * var(--modern-unit)); line-height:1.1; }
.prayertimes-wrapper[data-modern-glass="true"][data-modern-horizontal="true"] .prayer__time { font-size:calc(6.4 * var(--modern-unit)); line-height:1.05; transform:none; }
.prayertimes-wrapper[data-modern-glass="true"][data-modern-horizontal="true"] .prayer__icon { width:calc(5 * var(--modern-unit)); height:calc(5 * var(--modern-unit)); flex-basis:calc(5 * var(--modern-unit)); }
/* Match Modern's compact layout refinements without inheriting its borders/shadows. */
@media(min-aspect-ratio:1/1) {

[data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.modern-notifications-card .modern-corner-icon.modern-icon-flipping,.modern-message > .modern-corner-icon.modern-icon-flipping) { animation-duration:1000ms; }
@keyframes material-icon-container-star {
 0% {opacity:1;transform:rotate(-34deg) scale(.95);clip-path:polygon(50.00% 3.00%,54.10% 3.18%,58.16% 3.71%,62.16% 4.60%,66.07% 5.83%,69.86% 7.40%,73.50% 9.30%,76.96% 11.50%,80.21% 14.00%,83.23% 16.77%,86.00% 19.79%,88.50% 23.04%,90.70% 26.50%,92.60% 30.14%,94.17% 33.93%,95.40% 37.84%,96.29% 41.84%,96.82% 45.90%,97.00% 50.00%,96.82% 54.10%,96.29% 58.16%,95.40% 62.16%,94.17% 66.07%,92.60% 69.86%,90.70% 73.50%,88.50% 76.96%,86.00% 80.21%,83.23% 83.23%,80.21% 86.00%,76.96% 88.50%,73.50% 90.70%,69.86% 92.60%,66.07% 94.17%,62.16% 95.40%,58.16% 96.29%,54.10% 96.82%,50.00% 97.00%,45.90% 96.82%,41.84% 96.29%,37.84% 95.40%,33.93% 94.17%,30.14% 92.60%,26.50% 90.70%,23.04% 88.50%,19.79% 86.00%,16.77% 83.23%,14.00% 80.21%,11.50% 76.96%,9.30% 73.50%,7.40% 69.86%,5.83% 66.07%,4.60% 62.16%,3.71% 58.16%,3.18% 54.10%,3.00% 50.00%,3.18% 45.90%,3.71% 41.84%,4.60% 37.84%,5.83% 33.93%,7.40% 30.14%,9.30% 26.50%,11.50% 23.04%,14.00% 19.79%,16.77% 16.77%,19.79% 14.00%,23.04% 11.50%,26.50% 9.30%,30.14% 7.40%,33.93% 5.83%,37.84% 4.60%,41.84% 3.71%,45.90% 3.18%);border-radius:50%;}
 32% {opacity:1;transform:rotate(-16deg) scale(1);clip-path:polygon(50.00% 4.00%,53.98% 4.55%,57.74% 6.11%,61.14% 8.43%,64.13% 11.19%,66.78% 14.01%,69.27% 16.63%,71.80% 18.86%,74.58% 20.71%,77.70% 22.30%,81.13% 23.88%,84.69% 25.71%,88.11% 28.00%,91.03% 30.87%,93.17% 34.29%,94.30% 38.13%,94.38% 42.17%,93.52% 46.19%,92.00% 50.00%,90.16% 53.51%,88.34% 56.76%,86.84% 59.87%,85.77% 63.02%,85.10% 66.37%,84.64% 70.00%,84.12% 73.89%,83.22% 77.88%,81.70% 81.70%,79.41% 85.05%,76.38% 87.67%,72.73% 89.37%,68.72% 90.14%,64.60% 90.12%,60.60% 89.57%,56.85% 88.83%,53.34% 88.23%,50.00% 88.00%,46.66% 88.23%,43.15% 88.83%,39.40% 89.57%,35.40% 90.12%,31.28% 90.14%,27.27% 89.37%,23.62% 87.67%,20.59% 85.05%,18.30% 81.70%,16.78% 77.88%,15.88% 73.89%,15.36% 70.00%,14.90% 66.37%,14.23% 63.02%,13.16% 59.87%,11.66% 56.76%,9.84% 53.51%,8.00% 50.00%,6.48% 46.19%,5.62% 42.17%,5.70% 38.13%,6.83% 34.29%,8.97% 30.87%,11.89% 28.00%,15.31% 25.71%,18.87% 23.88%,22.30% 22.30%,25.42% 20.71%,28.20% 18.86%,30.73% 16.63%,33.22% 14.01%,35.87% 11.19%,38.86% 8.43%,42.26% 6.11%,46.02% 4.55%);border-radius:26%;}
 48% {opacity:1;transform:rotate(3deg) scale(1.018);clip-path:polygon(50.00% 6.00%,53.70% 7.66%,56.86% 11.10%,59.84% 13.29%,63.51% 12.88%,67.96% 11.48%,72.00% 11.89%,74.38% 15.19%,75.39% 19.74%,76.87% 23.13%,80.26% 24.61%,84.81% 25.62%,88.11% 28.00%,88.52% 32.04%,87.12% 36.49%,86.71% 40.16%,88.90% 43.14%,92.34% 46.30%,94.00% 50.00%,92.34% 53.70%,88.90% 56.86%,86.71% 59.84%,87.12% 63.51%,88.52% 67.96%,88.11% 72.00%,84.81% 74.38%,80.26% 75.39%,76.87% 76.87%,75.39% 80.26%,74.38% 84.81%,72.00% 88.11%,67.96% 88.52%,63.51% 87.12%,59.84% 86.71%,56.86% 88.90%,53.70% 92.34%,50.00% 94.00%,46.30% 92.34%,43.14% 88.90%,40.16% 86.71%,36.49% 87.12%,32.04% 88.52%,28.00% 88.11%,25.62% 84.81%,24.61% 80.26%,23.13% 76.87%,19.74% 75.39%,15.19% 74.38%,11.89% 72.00%,11.48% 67.96%,12.88% 63.51%,13.29% 59.84%,11.10% 56.86%,7.66% 53.70%,6.00% 50.00%,7.66% 46.30%,11.10% 43.14%,13.29% 40.16%,12.88% 36.49%,11.48% 32.04%,11.89% 28.00%,15.19% 25.62%,19.74% 24.61%,23.13% 23.13%,24.61% 19.74%,25.62% 15.19%,28.00% 11.89%,32.04% 11.48%,36.49% 12.88%,40.16% 13.29%,43.14% 11.10%,46.30% 7.66%);border-radius:8%;}
 60% {opacity:1;transform:rotate(-2deg) scale(1.025);clip-path:polygon(50.00% 3.00%,53.79% 6.67%,56.34% 14.05%,58.54% 18.12%,62.48% 15.70%,68.38% 10.58%,73.50% 9.30%,74.95% 14.37%,73.46% 22.04%,73.33% 26.67%,77.96% 26.54%,85.63% 25.05%,90.70% 26.50%,89.42% 31.62%,84.30% 37.52%,81.88% 41.46%,85.95% 43.66%,93.33% 46.21%,97.00% 50.00%,93.33% 53.79%,85.95% 56.34%,81.88% 58.54%,84.30% 62.48%,89.42% 68.38%,90.70% 73.50%,85.63% 74.95%,77.96% 73.46%,73.33% 73.33%,73.46% 77.96%,74.95% 85.63%,73.50% 90.70%,68.38% 89.42%,62.48% 84.30%,58.54% 81.88%,56.34% 85.95%,53.79% 93.33%,50.00% 97.00%,46.21% 93.33%,43.14% 88.90%,40.16% 86.71%,36.49% 87.12%,32.04% 88.52%,28.00% 88.11%,25.62% 84.81%,24.61% 80.26%,23.13% 76.87%,19.74% 75.39%,15.19% 74.38%,11.89% 72.00%,11.48% 67.96%,12.88% 63.51%,13.29% 59.84%,11.10% 56.86%,7.66% 53.70%,3.00% 50.00%,6.67% 46.21%,14.05% 43.66%,18.12% 41.46%,15.70% 37.52%,10.58% 31.62%,9.30% 26.50%,14.37% 25.05%,22.04% 26.54%,26.67% 26.67%,26.54% 22.04%,25.05% 14.37%,26.50% 9.30%,31.62% 10.58%,37.52% 15.70%,41.46% 18.12%,43.66% 14.05%,46.21% 6.67%);border-radius:0;}
 72% {opacity:1;transform:rotate(4deg) scale(1);clip-path:polygon(50.00% 6.00%,53.70% 7.66%,56.86% 11.10%,59.84% 13.29%,63.51% 12.88%,67.96% 11.48%,72.00% 11.89%,74.38% 15.19%,75.39% 19.74%,76.87% 23.13%,80.26% 24.61%,84.81% 25.62%,88.11% 28.00%,88.52% 32.04%,87.12% 36.49%,86.71% 40.16%,88.90% 43.14%,92.34% 46.30%,94.00% 50.00%,92.34% 53.70%,88.90% 56.86%,86.71% 59.84%,87.12% 63.51%,88.52% 67.96%,88.11% 72.00%,84.81% 74.38%,80.26% 75.39%,76.87% 76.87%,75.39% 80.26%,74.38% 84.81%,72.00% 88.11%,67.96% 88.52%,63.51% 87.12%,59.84% 86.71%,56.86% 88.90%,53.70% 92.34%,50.00% 94.00%,46.30% 92.34%,43.14% 88.90%,40.16% 86.71%,36.49% 87.12%,32.04% 88.52%,28.00% 88.11%,25.62% 84.81%,24.61% 80.26%,23.13% 76.87%,19.74% 75.39%,15.19% 74.38%,11.89% 72.00%,11.48% 67.96%,12.88% 63.51%,13.29% 59.84%,11.10% 56.86%,7.66% 53.70%,6.00% 50.00%,7.66% 46.30%,11.10% 43.14%,13.29% 40.16%,12.88% 36.49%,11.48% 32.04%,11.89% 28.00%,15.19% 25.62%,19.74% 24.61%,23.13% 23.13%,24.61% 19.74%,25.62% 15.19%,28.00% 11.89%,32.04% 11.48%,36.49% 12.88%,40.16% 13.29%,43.14% 11.10%,46.30% 7.66%);border-radius:8%;}
 86% {opacity:1;transform:rotate(2deg) scale(.99);clip-path:polygon(50.00% 4.00%,53.98% 4.55%,57.74% 6.11%,61.14% 8.43%,64.13% 11.19%,66.78% 14.01%,69.27% 16.63%,71.80% 18.86%,74.58% 20.71%,77.70% 22.30%,81.13% 23.88%,84.69% 25.71%,88.11% 28.00%,91.03% 30.87%,93.17% 34.29%,94.30% 38.13%,94.38% 42.17%,93.52% 46.19%,92.00% 50.00%,90.16% 53.51%,88.34% 56.76%,86.84% 59.87%,85.77% 63.02%,85.10% 66.37%,84.64% 70.00%,84.12% 73.89%,83.22% 77.88%,81.70% 81.70%,79.41% 85.05%,76.38% 87.67%,72.73% 89.37%,68.72% 90.14%,64.60% 90.12%,60.60% 89.57%,56.85% 88.83%,53.34% 88.23%,50.00% 88.00%,46.66% 88.23%,43.15% 88.83%,39.40% 89.57%,35.40% 90.12%,31.28% 90.14%,27.27% 89.37%,23.62% 87.67%,20.59% 85.05%,18.30% 81.70%,16.78% 77.88%,15.88% 73.89%,15.36% 70.00%,14.90% 66.37%,14.23% 63.02%,13.16% 59.87%,11.66% 56.76%,9.84% 53.51%,8.00% 50.00%,6.48% 46.19%,5.62% 42.17%,5.70% 38.13%,6.83% 34.29%,8.97% 30.87%,11.89% 28.00%,15.31% 25.71%,18.87% 23.88%,22.30% 22.30%,25.42% 20.71%,28.20% 18.86%,30.73% 16.63%,33.22% 14.01%,35.87% 11.19%,38.86% 8.43%,42.26% 6.11%,46.02% 4.55%);border-radius:26%;}
 100% {opacity:1;transform:none;clip-path:polygon(50.00% 3.00%,54.10% 3.18%,58.16% 3.71%,62.16% 4.60%,66.07% 5.83%,69.86% 7.40%,73.50% 9.30%,76.96% 11.50%,80.21% 14.00%,83.23% 16.77%,86.00% 19.79%,88.50% 23.04%,90.70% 26.50%,92.60% 30.14%,94.17% 33.93%,95.40% 37.84%,96.29% 41.84%,96.82% 45.90%,97.00% 50.00%,96.82% 54.10%,96.29% 58.16%,95.40% 62.16%,94.17% 66.07%,92.60% 69.86%,90.70% 73.50%,88.50% 76.96%,86.00% 80.21%,83.23% 83.23%,80.21% 86.00%,76.96% 88.50%,73.50% 90.70%,69.86% 92.60%,66.07% 94.17%,62.16% 95.40%,58.16% 96.29%,54.10% 96.82%,50.00% 97.00%,45.90% 96.82%,41.84% 96.29%,37.84% 95.40%,33.93% 94.17%,30.14% 92.60%,26.50% 90.70%,23.04% 88.50%,19.79% 86.00%,16.77% 83.23%,14.00% 80.21%,11.50% 76.96%,9.30% 73.50%,7.40% 69.86%,5.83% 66.07%,4.60% 62.16%,3.71% 58.16%,3.18% 54.10%,3.00% 50.00%,3.18% 45.90%,3.71% 41.84%,4.60% 37.84%,5.83% 33.93%,7.40% 30.14%,9.30% 26.50%,11.50% 23.04%,14.00% 19.79%,16.77% 16.77%,19.79% 14.00%,23.04% 11.50%,26.50% 9.30%,30.14% 7.40%,33.93% 5.83%,37.84% 4.60%,41.84% 3.71%,45.90% 3.18%);border-radius:50%;}
}
 .prayertimes-wrapper[data-modern-glass="true"]:is([data-modern-layout="4"],[data-modern-layout="5"],[data-modern-layout="6"]) .modern-header .localtime { font-size:calc(9.5 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-glass="true"]:is([data-modern-layout="4"],[data-modern-layout="5"],[data-modern-layout="6"]) .modern-header .date { margin-top:calc(-2 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-glass="true"]:is([data-modern-layout="4"],[data-modern-layout="5"],[data-modern-layout="6"]):not([data-modern-athkar="true"]) > .mwaqeet { flex-basis:calc(37.5 * var(--modern-unit)); }
}
/* Entrance inherits the established 800ms page rhythm. Existing carousel/timeline
   controllers retain ownership of their DOM; no extra swapping timers or out-in gaps. */
@keyframes modern-glass-arrive {
 from { opacity:0; transform:translateY(10px) scale(.99); }
 to { opacity:1; transform:translateY(0) scale(1); }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 .prayertimes-wrapper[data-modern-glass="true"] { --glass-surface:var(--color-ui); --glass-reading:var(--color-ui); }
}
@media(prefers-reduced-transparency:reduce), (prefers-contrast:more) {
 .prayertimes-wrapper[data-modern-glass="true"] { --glass-surface:var(--color-ui); --glass-reading:var(--color-ui); --glass-edge:var(--color-border); }
 .prayertimes-wrapper[data-modern-glass="true"] .modern-header { -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media(prefers-reduced-motion:reduce) {
 .prayertimes-wrapper[data-modern-glass="true"] .modern-header { animation:none; }
 .prayertimes-wrapper[data-modern-glass="true"] .prayer { transition:none; }
}

/* Glass only — a genuine seamless tile, never stretch the complete artwork.
   A shared tile size preserves the scale of the geometry across page and cards.
   The outer layers fade; their inner masks repeat independently on both axes. */
.prayertimes-wrapper[data-modern-glass="true"] {
 --glass-repeat-size:calc(28 * var(--modern-unit));
 --glass-pattern-image:url('/v2/views/designs/masjidi-modern/glass-pattern.svg?tile=2');
}
.prayertimes-wrapper[data-modern-glass="true"] .modern-glass-repeat {
 position:absolute; inset:0; display:block; pointer-events:none;
 background:var(--color-text);
 -webkit-mask-image:var(--glass-pattern-image); mask-image:var(--glass-pattern-image);
 -webkit-mask-size:var(--glass-repeat-size) auto; mask-size:var(--glass-repeat-size) auto;
 -webkit-mask-repeat:repeat; mask-repeat:repeat;
 -webkit-mask-position:center top; mask-position:center top;
}
.prayertimes-wrapper[data-modern-glass="true"] .modern-glass-ambience > .modern-glass-ornament {
 position:absolute; inset:0; display:block; opacity:.16; pointer-events:none;
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.45) 28%,transparent 80%);
 mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.45) 28%,transparent 80%);
}
/* A quieter etched footer on reading surfaces, leaving their text area calm. */
.prayertimes-wrapper[data-modern-glass="true"] .modern-card-pattern {
 top:auto; bottom:0; height:38%; opacity:.08; color:var(--color-text);
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 100%);
 mask-image:linear-gradient(to bottom,transparent 0%,#000 100%);
}
[data-theme="dark"] .prayertimes-wrapper[data-modern-glass="true"] .modern-glass-ambience > .modern-glass-ornament { opacity:.12; }
[data-theme="dark"] .prayertimes-wrapper[data-modern-glass="true"] .modern-card-pattern { opacity:.055; }
@media(prefers-contrast:more) {
 .prayertimes-wrapper[data-modern-glass="true"] :is(.modern-glass-ornament,.modern-card-pattern) { display:none; }
}

/* Glass wallpaper collection: quiet iOS-inspired depth, separate from card etching.
   These declarations are exclusive to Glass; no image requests in styles 1–4. */
.prayertimes-wrapper[data-modern-glass="true"] > .modern-glass-ambience {
 background-image:var(--glass-wallpaper-light);
 /* Keep the artwork's luminance; take hue/saturation from the mosque palette.
    Background blending never filters the cards, their text, or their QR codes. */
 background-color:var(--color-text);
 background-blend-mode:luminosity;
 background-size:cover; background-position:center; background-repeat:no-repeat;
}
[data-theme="dark"] .prayertimes-wrapper[data-modern-glass="true"] > .modern-glass-ambience {
 background-image:var(--glass-wallpaper-dark);
}
.prayertimes-wrapper[data-modern-glass="true"] .modern-glass-ambience > .modern-glass-ornament { display:none; }

/* Glass audit: keep a single material plane, with the original mosque hue at night. */
.prayertimes-wrapper[data-modern-glass="true"][data-modern-layout] > .mwaqeet > .prayers { background:transparent; }
.prayertimes-wrapper[data-modern-glass="true"] > .modern-glass-ambience {
 background-color:var(--light-color-darker_text,var(--color-darker_text));
 background-color:color-mix(in srgb,var(--light-color-darker_text,var(--color-darker_text)) 72%,var(--color-ui));
}
/* Static frost softens wallpaper contours behind copy without fading the copy.
   Match the existing header; never animate these backdrop filters. */
.prayertimes-wrapper[data-modern-glass="true"][data-modern-layout] > .mwaqeet,
.prayertimes-wrapper[data-modern-glass="true"] :is(.modern-message,.modern-notifications-card,.modern-campaign-card),
.prayertimes-wrapper[data-modern-glass="true"] > .splash.modern-post-prayer-splash {
 -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.prayertimes-wrapper[data-modern-glass="true"] .modern-card-pattern { opacity:.045; }
[data-theme="dark"] .prayertimes-wrapper[data-modern-glass="true"] .modern-card-pattern { opacity:.025; }
[data-theme="dark"] .prayertimes-wrapper[data-modern-glass="true"] .prayer.prayer--active {
 background-image:linear-gradient(145deg,rgba(255,255,255,.06),transparent 60%);
}
@media(prefers-reduced-transparency:reduce), (prefers-contrast:more) {
 [data-theme] .prayertimes-wrapper[data-modern-glass="true"] {
  --glass-surface:var(--color-ui); --glass-reading:var(--color-ui);
 }
 .prayertimes-wrapper[data-modern-glass="true"][data-modern-layout] > .mwaqeet,
 .prayertimes-wrapper[data-modern-glass="true"] :is(.modern-header,.modern-message,.modern-notifications-card,.modern-campaign-card),
 .prayertimes-wrapper[data-modern-glass="true"] > .splash.modern-post-prayer-splash {
  -webkit-backdrop-filter:none; backdrop-filter:none;
 }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 [data-theme] .prayertimes-wrapper[data-modern-glass="true"] {
  --glass-surface:var(--color-ui); --glass-reading:var(--color-ui);
 }
}

/* Glass layout audit: retain optical label alignment without touching the next
   line, and keep the countdown's line box inside the shallow horizontal footer. */
.prayertimes-wrapper[data-modern-glass="true"][data-modern-horizontal="true"] .prayer__main { row-gap:calc(.75 * var(--modern-unit)); }
/* Qomra numerals need the same ink-centering correction in horizontal footers. */
.prayertimes-wrapper[data-modern-glass="true"][data-modern-horizontal="true"] .modern-countdown-card .clock { transform:translateY(.12em); }
/* All styles: public layouts 5–7 use a shallow, full-width content card.
   Put QR and copy in one row. Logical grid columns
   mirror automatically in English; portrait keeps its existing QR footer. */
@media(min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-style][data-modern-horizontal="true"] .notification__content {
  display:grid; grid-template-columns:minmax(0,1fr) calc(22 * var(--modern-unit));
  grid-template-rows:minmax(0,1fr); column-gap:calc(3 * var(--modern-unit));
  align-items:stretch; padding-block:calc(3 * var(--modern-unit));
 }
 .prayertimes-wrapper[data-modern-style][data-modern-horizontal="true"] .notification__content--no-qr { grid-template-columns:minmax(0,1fr); }
 .prayertimes-wrapper[data-modern-style][data-modern-horizontal="true"] .notification__copy {
  grid-column:1; grid-row:1; width:auto; height:100%; min-width:0; min-height:0;
 }
 .prayertimes-wrapper[data-modern-style][data-modern-horizontal="true"] .notification__qr-details {
  grid-column:2; grid-row:1; position:static; inset:auto;
  width:100%; max-width:none; min-width:0; align-self:center;
  flex-direction:column; align-items:center; gap:calc(.8 * var(--modern-unit));
 }
 .prayertimes-wrapper[data-modern-style][data-modern-horizontal="true"] .notification__qr-note { width:100%; max-width:none; text-align:center; }
 .prayertimes-wrapper[data-modern-style][data-modern-horizontal="true"] .notification__qr-details .notification__qr {
  width:calc(10.5 * var(--modern-unit)); height:calc(10.5 * var(--modern-unit)); flex-basis:calc(10.5 * var(--modern-unit));
 }
}

/* Heritage: a Main-color background with broad Background-color pools of light. */
.prayertimes-wrapper[data-modern-style="3"] {
 --heritage-base:var(--color-darker_text);
 --heritage-glow:color-mix(in srgb,var(--color-background) 24%,var(--color-darker_text));
 --heritage-wash:color-mix(in srgb,var(--color-background) 9%,var(--color-darker_text));
 --heritage-wallpaper:radial-gradient(ellipse 58% 46% at 30% 34%,var(--heritage-glow),transparent 80%),radial-gradient(ellipse 48% 54% at 72% 67%,var(--heritage-wash),transparent 85%),linear-gradient(135deg,var(--color-darker_text) 12%,var(--heritage-wash) 54%,var(--color-darker_text) 90%);
}
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="3"] {
 --heritage-glow:color-mix(in srgb,var(--color-background) 42%,var(--color-darker_text));
 --heritage-wash:color-mix(in srgb,var(--color-background) 12%,var(--color-darker_text));
}

/* Glass stays clean; Heritage shares its tested material/layout and owns ornament. */
.prayertimes-wrapper[data-modern-style="1"] .modern-card-pattern { display:none; }
.prayertimes-wrapper[data-modern-style="3"] > .modern-glass-ambience,
[data-theme] .prayertimes-wrapper[data-modern-style="3"] > .modern-glass-ambience {
 background-color:var(--heritage-base); background-blend-mode:normal;
 background-image:var(--heritage-wallpaper);
 background-size:cover;
}
.prayertimes-wrapper[data-modern-style="3"] .modern-glass-ambience > .modern-glass-ornament {
 display:block; opacity:.28; filter:blur(.6px);
 -webkit-mask-image:linear-gradient(135deg,#000 0%,rgba(0,0,0,.65) 45%,rgba(0,0,0,.85) 100%);
 mask-image:linear-gradient(135deg,#000 0%,rgba(0,0,0,.65) 45%,rgba(0,0,0,.85) 100%);
}
.prayertimes-wrapper[data-modern-style="3"] .modern-glass-ambience .modern-glass-repeat { background:var(--color-background); }
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="3"] .modern-glass-ambience .modern-glass-repeat { background:color-mix(in srgb,var(--color-background) 45%,var(--color-text)); }
.prayertimes-wrapper[data-modern-style="3"] .modern-card-pattern { display:none; }
.prayertimes-wrapper[data-modern-style="3"] :is(.modern-message,.modern-notifications-card) > .modern-card-pattern {
 display:block; opacity:.055; height:46%;
}
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="3"] .modern-glass-ambience > .modern-glass-ornament { opacity:.22; }
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="3"] :is(.modern-message,.modern-notifications-card) > .modern-card-pattern { opacity:.03; }
[dir="ltr"] .prayertimes-wrapper[data-modern-style="3"][data-modern-horizontal="false"] .modern-countdown-card .timing-status__span--title { font-size:calc(4.2 * var(--modern-unit)); }
@media(prefers-contrast:more) {
 .prayertimes-wrapper[data-modern-style="3"] .modern-glass-ambience > .modern-glass-ornament,
 .prayertimes-wrapper[data-modern-style="3"] :is(.modern-message,.modern-notifications-card) > .modern-card-pattern { display:none; }
}

/* Glass wallpaper only: slow, shallow drift. Overscan prevents exposed edges.
   Move one composited background plane; do not animate text, filters or layout. */
.prayertimes-wrapper:is([data-modern-style="1"],[data-modern-style="2"]) > .modern-glass-ambience {
 inset:-3vmax;
 animation:modern-glass-wallpaper-drift 16s cubic-bezier(.45,0,.55,1) infinite alternate;
 backface-visibility:hidden;
 will-change:transform;
}
@keyframes modern-glass-wallpaper-drift {
 from { transform:translate3d(-1.4vmax,-.7vmax,0) scale(1.015); }
 to { transform:translate3d(1.4vmax,.7vmax,0) scale(1.045); }
}
@media(prefers-reduced-motion:reduce) {
 .prayertimes-wrapper:is([data-modern-style="1"],[data-modern-style="2"]) > .modern-glass-ambience {
  inset:0; animation:none; transform:none; will-change:auto;
 }
}

/* Amber Glass: the second wallpaper, clean cards and the shared Glass motion.
   Dim the light artwork in dark mode without changing its shape or theme hue. */
.prayertimes-wrapper[data-modern-style="2"] .modern-card-pattern { display:none; }
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="2"] > .modern-glass-ambience {
 filter:brightness(.32);
}
[dir="ltr"] .prayertimes-wrapper[data-modern-style="2"][data-modern-horizontal="false"] .modern-countdown-card .timing-status__span--title { font-size:calc(4.2 * var(--modern-unit)); }

/* Amber uses the original main theme color, distinct from Glass's dark accent.
   Keep the original palette token at night rather than tinting with pale text. */
.prayertimes-wrapper[data-modern-style="2"] > .modern-glass-ambience {
 background-color:var(--light-color-text,var(--color-text));
 background-color:color-mix(in srgb,var(--light-color-text,var(--color-text)) 72%,var(--color-ui));
}

/* Heritage only: a rotating square larger than the viewport diagonal prevents
   exposed corners at every angle. Cards remain on their stationary glass plane. */
.prayertimes-wrapper[data-modern-style="3"] > .modern-glass-ambience,
[data-theme] .prayertimes-wrapper[data-modern-style="3"] > .modern-glass-ambience {
 inset:auto; left:50%; top:50%; width:145vmax; height:145vmax;
 transform-origin:center;
 background-image:var(--heritage-wallpaper);
 animation:modern-heritage-background-turn 240s linear infinite;
 filter:brightness(.94);
 backface-visibility:hidden;
 will-change:transform;
}
/* Blur the color pools independently so the fine ornament remains legible. */
.prayertimes-wrapper[data-modern-style="3"] > .modern-glass-ambience::before {
 content:""; position:absolute; inset:-24px; background:inherit;
 filter:blur(12px); pointer-events:none;
}
@keyframes modern-heritage-background-turn {
 from { transform:translate3d(-50%,-50%,0) rotate(0deg); }
 to { transform:translate3d(-50%,-50%,0) rotate(360deg); }
}
@supports (color:color-mix(in srgb, white, transparent)) {
 .prayertimes-wrapper[data-modern-style="3"] {
  --glass-surface:color-mix(in srgb,var(--color-ui) 74%,transparent);
  --glass-reading:color-mix(in srgb,var(--color-ui) 74%,transparent);
 }
 [data-theme="dark"] .prayertimes-wrapper[data-modern-style="3"] {
  --glass-surface:color-mix(in srgb,var(--color-ui) 74%,transparent);
  --glass-reading:color-mix(in srgb,var(--color-ui) 74%,transparent);
 }
}
@media(prefers-reduced-motion:reduce) {
 .prayertimes-wrapper[data-modern-style="3"] > .modern-glass-ambience,
 [data-theme] .prayertimes-wrapper[data-modern-style="3"] > .modern-glass-ambience {
  inset:-24px; width:auto; height:auto; animation:none; transform:none; will-change:auto;
 }
}
@media(prefers-reduced-transparency:reduce), (prefers-contrast:more) {
 [data-theme] .prayertimes-wrapper[data-modern-style="3"] {
  --glass-surface:var(--color-ui); --glass-reading:var(--color-ui);
 }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 [data-theme] .prayertimes-wrapper[data-modern-style="3"] {
  --glass-surface:var(--color-ui); --glass-reading:var(--color-ui);
 }
}

/* Color roles only: retain every styles original surface and Glass edges. */
/* Heritage content frost: 20px blur, retaining original borders and shadows. */
[data-theme] .prayertimes-wrapper[data-modern-style="3"][data-modern-layout] > .mwaqeet,
[data-theme] .prayertimes-wrapper[data-modern-style="3"] :is(.modern-message,.modern-notifications-card,.modern-campaign-card),
[data-theme] .prayertimes-wrapper[data-modern-style="3"] > .splash.modern-post-prayer-splash {
 -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
}
@media(prefers-reduced-transparency:reduce), (prefers-contrast:more) {
 [data-theme] .prayertimes-wrapper[data-modern-style="3"][data-modern-layout] > .mwaqeet,
 [data-theme] .prayertimes-wrapper[data-modern-style="3"] :is(.modern-message,.modern-notifications-card,.modern-campaign-card),
 [data-theme] .prayertimes-wrapper[data-modern-style="3"] > .splash.modern-post-prayer-splash {
  -webkit-backdrop-filter:none; backdrop-filter:none;
 }
}
.prayertimes-wrapper[data-modern-style] { --modern-main-foreground:var(--color-darker_text); }
[data-theme="dark"] .prayertimes-wrapper[data-modern-style] {
 --modern-main-foreground:var(--color-text);
}
@supports (color:color-mix(in srgb,black,white)) {
 [data-theme="dark"] .prayertimes-wrapper[data-modern-style] {
  --modern-main-foreground:color-mix(in srgb,var(--color-darker_text) 15%,var(--color-text));
 }
}
.prayertimes-wrapper[data-modern-style] .prayer.prayer--active .prayer__time,
.prayertimes-wrapper[data-modern-style] .modern-header :is(.localtime,.clock,.clock__part),
.prayertimes-wrapper[data-modern-style] .modern-notifications-card .notification__header { color:var(--modern-main-foreground); }
.prayertimes-wrapper[data-modern-style] .prayer:not(.prayer--active) .prayer__time { color:var(--color-text); }
[data-theme] .prayertimes-wrapper[data-modern-style]:not([data-modern-glass="true"]) {
 --modern-card-line:color-mix(in srgb,var(--color-border) 34%,var(--color-ui));
 --modern-line:var(--modern-card-line);
}
.prayertimes-wrapper[data-modern-style="8"] { --color-border:inherit; }
[data-theme] .prayertimes-wrapper[data-modern-style="8"] { --modern-card-line:var(--color-border); }
.prayertimes-wrapper[data-modern-style]:not([data-modern-glass="true"]) .prayer.prayer--active { border-color:var(--color-border); }

/* Style 5: consistent glass, halfway between the light and reading frost. */
.prayertimes-wrapper[data-modern-style="1"] .prayer.prayer--active {
 background-color:color-mix(in srgb,var(--color-darker_text) 12%,transparent);
}
.prayertimes-wrapper[data-modern-style="1"] .prayer.prayer--active :is(.prayer__name,.prayer__time,.prayer__image),
.prayertimes-wrapper[data-modern-style="1"] :is(.modern-corner-icon,.campaign-notification__icon,.modern-athkar__footer,.modern-athkar__count),
.prayertimes-wrapper[data-modern-style="1"] .modern-weather-reading .city-weather__icon--realistic { color:var(--modern-main-foreground); }
.prayertimes-wrapper[data-modern-style="1"] .prayer.prayer--active .prayer__icon::before { background:var(--color-darker_text); }
.prayertimes-wrapper[data-modern-style="1"] :is(.modern-corner-icon,.campaign-notification__icon,.modern-athkar__footer,.modern-athkar__count) {
 background-color:color-mix(in srgb,var(--color-darker_text) 10%,transparent);
}
[data-theme] .prayertimes-wrapper[data-modern-style="1"] { --glass-reading:var(--glass-surface); }
@supports (color:color-mix(in srgb,white,transparent)) {
 [data-theme="light"] .prayertimes-wrapper[data-modern-style="1"] { --glass-surface:color-mix(in srgb,var(--color-ui) 80%,transparent); }
 [data-theme="dark"] .prayertimes-wrapper[data-modern-style="1"] { --glass-surface:color-mix(in srgb,var(--color-ui) 86%,transparent); }
}
[data-theme] .prayertimes-wrapper[data-modern-style="1"][data-modern-layout] > .mwaqeet,
[data-theme] .prayertimes-wrapper[data-modern-style="1"] :is(.modern-header,.modern-message,.modern-notifications-card,.modern-campaign-card),
[data-theme] .prayertimes-wrapper[data-modern-style="1"] > .splash.modern-post-prayer-splash {
 -webkit-backdrop-filter:blur(17px) saturate(112.5%);
 backdrop-filter:blur(17px) saturate(112.5%);
}
@media(prefers-reduced-transparency:reduce), (prefers-contrast:more) {
 [data-theme] .prayertimes-wrapper[data-modern-style="1"] { --glass-surface:var(--color-ui); }
 [data-theme] .prayertimes-wrapper[data-modern-style="1"][data-modern-layout] > .mwaqeet,
 [data-theme] .prayertimes-wrapper[data-modern-style="1"] :is(.modern-header,.modern-message,.modern-notifications-card,.modern-campaign-card),
 [data-theme] .prayertimes-wrapper[data-modern-style="1"] > .splash.modern-post-prayer-splash {
  -webkit-backdrop-filter:none; backdrop-filter:none;
 }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 [data-theme] .prayertimes-wrapper[data-modern-style="1"] { --glass-surface:var(--color-ui); }
}

/* Glass accent details keep their original lens alpha and shadow geometry. */
.prayertimes-wrapper[data-modern-style="1"] .prayer.prayer--active {
 border-color:var(--glass-edge);
 box-shadow:inset 0 1px 0 var(--glass-highlight),0 3px 10px -5px color-mix(in srgb,var(--color-darker_text) 20%,transparent);
}
.prayertimes-wrapper[data-modern-style="1"] :is(.modern-corner-icon,.campaign-notification__icon,.notification__event-tag,.modern-athkar__footer,.modern-athkar__count) {
 border-color:var(--glass-edge);
 box-shadow:inset 0 1px 0 var(--glass-highlight);
}
.prayertimes-wrapper[data-modern-style="1"] .notification__event-tag {
 background-color:color-mix(in srgb,var(--color-darker_text) 10%,transparent);
 color:var(--modern-main-foreground);
}

/* Explicit prayer color roles across every style, independent of surface ink. */
.prayertimes-wrapper[data-modern-style] .modern-campaign-card .campaign-notification__title { color:var(--modern-main-foreground); }
.prayertimes-wrapper[data-modern-style] .modern-campaign-card .campaign-notification__description { color:var(--color-text); }
.prayertimes-wrapper[data-modern-style] .modern-notifications-card :is(.notification__lecturer-icon,.notification__schedule-icon) {
 color:var(--color-text);
}
.prayertimes-wrapper[data-modern-style] .prayer:not(.prayer--active) :is(.prayer__name,.prayer__time) {
 color:var(--color-text);
}
.prayertimes-wrapper[data-modern-style] .prayer.prayer--active :is(.prayer__name,.prayer__time) {
 color:var(--modern-main-foreground);
}
/* Classic marks the current prayer with a quiet Main-color fill, without an edge. */
.prayertimes-wrapper[data-modern-style="8"][data-modern-layout] .prayer.prayer--active {
 border-color:transparent; box-shadow:none;
 background:color-mix(in srgb,var(--color-darker_text) 14%,var(--color-ui));
}

/* Logo, Smartbox and post-prayer views share the original logo frost. */
[data-theme] .prayertimes-wrapper[data-modern-style="1"][data-modern-layout] :is(.modern-header,.modern-campaign-card,.modern-post-prayer-splash,.mwaqeet--athkar,.mwaqeet--athkar-exiting) {
 background-color:var(--color-ui);
 -webkit-backdrop-filter:blur(20px) saturate(125%);
 backdrop-filter:blur(20px) saturate(125%);
}
@supports (color:color-mix(in srgb,white,transparent)) {
 [data-theme="light"] .prayertimes-wrapper[data-modern-style="1"][data-modern-layout] :is(.modern-header,.modern-campaign-card,.modern-post-prayer-splash,.mwaqeet--athkar,.mwaqeet--athkar-exiting) { background-color:color-mix(in srgb,var(--color-ui) 74%,transparent); }
 [data-theme="dark"] .prayertimes-wrapper[data-modern-style="1"][data-modern-layout] :is(.modern-header,.modern-campaign-card,.modern-post-prayer-splash,.mwaqeet--athkar,.mwaqeet--athkar-exiting) { background-color:color-mix(in srgb,var(--color-ui) 82%,transparent); }
}
@media(prefers-reduced-transparency:reduce), (prefers-contrast:more) {
 [data-theme] .prayertimes-wrapper[data-modern-style="1"][data-modern-layout] :is(.modern-header,.modern-campaign-card,.modern-post-prayer-splash,.mwaqeet--athkar,.mwaqeet--athkar-exiting) {
  background-color:var(--color-ui); -webkit-backdrop-filter:none; backdrop-filter:none;
 }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 [data-theme] .prayertimes-wrapper[data-modern-style="1"][data-modern-layout] :is(.modern-header,.modern-campaign-card,.modern-post-prayer-splash,.mwaqeet--athkar,.mwaqeet--athkar-exiting) { background-color:var(--color-ui); }
}

/* Glass 5–7 completion: one motion vocabulary, stable reading surfaces, and
   thin tinted overlays. Preserve each style's established frost and wallpaper. */
.prayertimes-wrapper[data-modern-glass="true"] {
 --modern-motion-ease:cubic-bezier(.22,.75,.2,1);
 --glass-notification-surface:var(--glass-reading);
 --glass-notification-blur:blur(14px);
}
.prayertimes-wrapper[data-modern-style="1"] { --glass-notification-blur:blur(20px) saturate(125%); }
.prayertimes-wrapper[data-modern-style="3"] { --glass-notification-blur:blur(20px); }
@supports(color:color-mix(in srgb,white,transparent)) {
 [data-theme="light"] .prayertimes-wrapper[data-modern-style="1"] { --glass-notification-surface:color-mix(in srgb,var(--color-ui) 74%,transparent); }
 [data-theme="dark"] .prayertimes-wrapper[data-modern-style="1"] { --glass-notification-surface:color-mix(in srgb,var(--color-ui) 82%,transparent); }
}
/* A notification changes content inside a persistent lens; never stack two
   translucent card backgrounds while their messages crossfade. */
.prayertimes-wrapper[data-modern-glass="true"] .modern-campaign-stage { isolation:isolate; }
.prayertimes-wrapper[data-modern-glass="true"] .campaign-notification__description { font-style:normal; }
.prayertimes-wrapper[data-modern-glass="true"] .modern-campaign-stage::before {
 content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
 border:1.5px solid var(--glass-edge); border-radius:var(--glass-radius);
 background:var(--glass-notification-surface);
 background-image:linear-gradient(150deg,rgba(255,255,255,.10),transparent 35%);
 box-shadow:inset 0 1px 0 var(--glass-highlight),var(--glass-shadow);
 -webkit-backdrop-filter:var(--glass-notification-blur); backdrop-filter:var(--glass-notification-blur);
}
[data-theme] .prayertimes-wrapper[data-modern-glass="true"][data-modern-layout] .modern-campaign-stage > .modern-campaign-card {
 background:transparent; border-color:transparent; box-shadow:none;
 -webkit-backdrop-filter:none; backdrop-filter:none;
}
.prayertimes-wrapper[data-modern-glass="true"] .modern-campaign-card.modern-campaign-enter-from { transform:translateY(10px); }
.prayertimes-wrapper[data-modern-glass="true"] .modern-campaign-card.modern-campaign-leave-to { transform:translateY(-10px); }
.prayertimes-wrapper[data-modern-glass="true"] .modern-campaign-card.modern-campaign-leave-active {
 transition:opacity var(--modern-motion-switch) var(--modern-motion-ease),transform var(--modern-motion-switch) var(--modern-motion-ease);
}
/* A brief exit hands off promptly to the full, staggered Glass entrance. */
.prayertimes-wrapper[data-modern-glass="true"] .modern-content-stage > .modern-card-slide-enter-from { transform:translateY(12px); }
.prayertimes-wrapper[data-modern-glass="true"] .modern-content-stage > .modern-card-slide-leave-to { transform:translateY(-12px); }
.prayertimes-wrapper[data-modern-glass="true"] .modern-content-stage > .modern-card-slide-leave-active {
 transition:opacity calc(var(--modern-motion-switch) * .4) ease-in-out,transform calc(var(--modern-motion-switch) * .4) var(--modern-motion-ease);
}
.modern-glass-hadith-stage { display:grid; grid-template:minmax(0,1fr)/minmax(0,1fr); flex:1; min-height:0; min-width:0; position:relative; }
.modern-glass-hadith-stage > .modern-hadith-copy { grid-area:1/1; height:100%; min-width:0; }
.modern-glass-hadith-stage > .modern-glass-hadith-enter-active,
.modern-glass-hadith-stage > .modern-glass-hadith-leave-active {
 transition:opacity var(--modern-motion-switch) var(--modern-motion-ease),transform var(--modern-motion-switch) var(--modern-motion-ease);
 will-change:opacity,transform;
}
.modern-glass-hadith-enter-from { opacity:0; transform:translateY(10px); }
.modern-glass-hadith-leave-to { opacity:0; transform:translateY(-10px); }
.modern-glass-hadith-enter-to,.modern-glass-hadith-leave-from { opacity:1; transform:none; }
.modern-glass-hadith-leave-active { pointer-events:none; }
/* Tinted details share the Main role across all three materials. Inner overlays
   have no second backdrop blur, preserving the existing neutral edge shine. */
.prayertimes-wrapper[data-modern-glass="true"] :is(.modern-corner-icon,.campaign-notification__icon,.modern-athkar__footer,.modern-athkar__count,.notification__event-tag),
.prayertimes-wrapper[data-modern-glass="true"] .modern-weather-reading .city-weather__icon--realistic,
.prayertimes-wrapper[data-modern-glass="true"] .prayer--active .prayer__image { color:var(--modern-main-foreground); }
@supports(color:color-mix(in srgb,white,transparent)) {
 .prayertimes-wrapper[data-modern-glass="true"] :is(.modern-corner-icon,.campaign-notification__icon,.modern-athkar__footer,.modern-athkar__count,.notification__event-tag) { background-color:color-mix(in srgb,var(--color-darker_text) 10%,transparent); }
 .prayertimes-wrapper[data-modern-glass="true"] .prayer.prayer--active { background-color:color-mix(in srgb,var(--color-darker_text) 12%,transparent); }
}
.prayertimes-wrapper[data-modern-glass="true"] .prayer--active .prayer__icon::before { background:var(--color-darker_text); }
@media(prefers-reduced-motion:reduce) {
 .prayertimes-wrapper[data-modern-glass="true"] .modern-content-stage > :is(.modern-card-slide-enter-active,.modern-card-slide-leave-active),
 .prayertimes-wrapper[data-modern-glass="true"] .modern-campaign-card,
 .modern-glass-hadith-stage > .modern-hadith-copy { transition:none; transform:none; }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
 [data-theme] .prayertimes-wrapper[data-modern-glass="true"] { --glass-notification-surface:var(--color-ui); --glass-notification-blur:none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 [data-theme] .prayertimes-wrapper[data-modern-glass="true"] { --glass-notification-surface:var(--color-ui); --glass-notification-blur:none; }
}


/* Compact weather metric: a distinct rain/humidity icon and percentage. */
.prayertimes-wrapper[data-modern-style] .modern-weather-data > .modern-weather-detail { display:inline-flex; align-items:center; justify-content:center; gap:.25em; white-space:nowrap; }
.modern-weather-detail__icon { display:flex; align-items:center; justify-content:center; flex:0 0 1.1em; width:1.1em; height:1.1em; }
.modern-weather-detail__icon svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; }

/* Nudge only the humidity value; the metric icon keeps its original position. */
.modern-weather-detail[data-weather-detail="humidity"] > span:last-child { transform:none; }

/* Material Symbols are filled vector paths, including the small metric icons. */
.city-weather__reading .modern-material-weather { fill:currentColor; stroke:none; }
.modern-weather-detail__icon svg.modern-material-weather { fill:currentColor; stroke:none; }

/* Give the large temperature enough breathing room while keeping the compact
   humidity/rain metric visually grouped. */
.prayertimes-wrapper[data-modern-style] .modern-weather-temperature > span { letter-spacing:0; }
.prayertimes-wrapper[data-modern-style] .modern-weather-detail > span:last-child { letter-spacing:-.045em; }

.city-weather__icon > .modern-weather-artwork {
 --weather-artwork-scale:1.1;
 --weather-artwork-x:calc(.15 * var(--modern-unit));
 --weather-artwork-y:calc(.45 * var(--modern-unit));
 display:block; width:100%; height:100%; object-fit:contain; filter:none;
 transform:translate(var(--weather-artwork-x),var(--weather-artwork-y)) scale(var(--weather-artwork-scale));
 transform-origin:50% 54%; will-change:transform;
}
.prayertimes-wrapper[data-modern-style] .city-weather__icon > .modern-weather-artwork {
 transform:translate(var(--weather-artwork-x),var(--weather-artwork-y)) scale(var(--weather-artwork-scale));
}
.prayertimes-wrapper[data-modern-style] .city-weather__icon > .modern-weather-artwork--clear-night {
 --weather-artwork-scale:1;
}

/* Calm, condition-aware motion: readable on TV and inexpensive to composite. */
@keyframes modern-weather-breathe {
 0%,100% { transform:translate(var(--weather-artwork-x),var(--weather-artwork-y)) scale(var(--weather-artwork-scale)); }
 50% { transform:translate(var(--weather-artwork-x),calc(var(--weather-artwork-y) - .18 * var(--modern-unit))) scale(calc(var(--weather-artwork-scale) + .018)); }
}
@keyframes modern-weather-cloud-drift {
 0%,100% { transform:translate(var(--weather-artwork-x),var(--weather-artwork-y)) scale(var(--weather-artwork-scale)); }
 50% { transform:translate(calc(var(--weather-artwork-x) + .22 * var(--modern-unit)),calc(var(--weather-artwork-y) - .12 * var(--modern-unit))) scale(var(--weather-artwork-scale)); }
}
.modern-weather-artwork--sun { animation:modern-weather-breathe 9s cubic-bezier(.4,0,.2,1) infinite; }
.modern-weather-artwork--clear-night { animation:modern-weather-breathe 11s cubic-bezier(.4,0,.2,1) infinite; }
.modern-weather-artwork--partly-cloudy-day,
.modern-weather-artwork--partly-cloudy-night,
.modern-weather-artwork--cloud,
.modern-weather-artwork--haze { animation:modern-weather-cloud-drift 14s cubic-bezier(.4,0,.2,1) infinite; }
.modern-weather-artwork--drizzle,
.modern-weather-artwork--cloud-rain,
.modern-weather-artwork--snowflake,
.modern-weather-artwork--cloud-lightning { animation:modern-weather-cloud-drift 8s cubic-bezier(.4,0,.2,1) infinite; }
@media(prefers-reduced-motion:reduce) {
 .city-weather__icon > .modern-weather-artwork { animation:none !important; will-change:auto; }
}

/* Larger Glass prayer content retains room inside compact and grid rows. */
.prayertimes-wrapper[data-modern-glass="true"][data-modern-prayer-grid="true"] :is(.prayer__time,.prayer__iqama-wait-duration) { transform:none; }
@media(max-aspect-ratio:999/1000) {
 .prayertimes-wrapper[data-modern-glass="true"][data-modern-prayer-grid="true"]:not([data-modern-athkar="true"]) > .mwaqeet { flex-basis:50%; }
}

/* Glass content badges gain breathing room; their inner artwork stays the same size. */
.prayertimes-wrapper[data-modern-glass="true"] :is(.modern-message > .modern-corner-icon,.modern-notifications-card .modern-corner-icon,.modern-campaign-card .campaign-notification__icon) {
 width:calc(8.8 * var(--modern-unit)); height:calc(8.8 * var(--modern-unit)); padding:calc(1.8 * var(--modern-unit)); flex-shrink:0;
}
.prayertimes-wrapper[data-modern-glass="true"] :is(.modern-message,.modern-notifications-card .notification__content) { padding-inline-start:calc(14.5 * var(--modern-unit)); }
@media(min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-glass="true"][data-modern-horizontal="true"] :is(.modern-message > .modern-corner-icon,.modern-notifications-card .modern-corner-icon,.modern-campaign-card .campaign-notification__icon) {
  width:calc(5.5 * var(--modern-unit)); height:calc(5.5 * var(--modern-unit)); padding:calc(1.15 * var(--modern-unit));
 }
 .prayertimes-wrapper[data-modern-glass="true"][data-modern-horizontal="true"] :is(.modern-message,.modern-notifications-card .notification__content) { padding-inline-start:calc(11 * var(--modern-unit)); }
}

/* Each Glass surface owns its entrance; shared parent fades stay out of its way. */
.prayertimes-wrapper[data-modern-glass="true"] .modern-header { animation:none; }
.prayertimes-wrapper[data-modern-glass="true"] .modern-glass-card-pending { opacity:0 !important; pointer-events:none; }
.prayertimes-wrapper[data-modern-glass="true"] .modern-glass-card-arriving {
 animation:modern-glass-arrive var(--modern-motion-switch) var(--modern-motion-ease) var(--modern-glass-arrival-delay,0ms) both;
 transition:none !important;
}
.prayertimes-wrapper[data-modern-glass="true"] .modern-glass-card-withdrawing { animation:modern-glass-withdraw calc(var(--modern-motion-switch) * .4) ease-in-out var(--modern-glass-departure-delay,0ms) both; transition:none !important; pointer-events:none; }
/* The old timetable surface has finished exiting before Vue swaps its key.
   Its retained leave node must not occupy a second flex/grid slot. */
.prayertimes-wrapper[data-modern-glass="true"] > .mwaqeet.fade-leave-active { display:none; }
/* Fullscreen exits hand off to the prepared, staggered main cards promptly. */
.prayertimes-wrapper[data-modern-glass="true"] > .splash.modern-post-prayer-splash.fade-leave-active { transition:opacity calc(var(--modern-motion-switch) * .4) ease-in-out; }
@keyframes modern-glass-withdraw { from {opacity:var(--modern-glass-exit-opacity,1);transform:var(--modern-glass-exit-transform,none);} to {opacity:0;transform:translateY(-10px) scale(.99);} }
.prayertimes-wrapper[data-modern-glass="true"] > :is(.info,.mwaqeet,.splash.modern-post-prayer-splash):is(.fade-enter-active,.fade-enter-from,.fade-enter-to),
.prayertimes-wrapper[data-modern-glass="true"] :is(.modern-athkar-view,.splash__azkar):is(.modern-athkar-slide-enter-active,.modern-athkar-slide-enter-from,.modern-athkar-slide-enter-to,.sub-splash-enter-active,.sub-splash-enter-from,.sub-splash-enter-to),
.prayertimes-wrapper[data-modern-glass="true"] .modern-content-stage > :is(.modern-card-slide-enter-active,.modern-card-slide-enter-from,.modern-card-slide-enter-to) {
 opacity:1; transform:none; transition:none;
}
/* Glass badges acknowledge a content change with a restrained lift and settle. */
.prayertimes-wrapper[data-modern-glass="true"] .modern-corner-icon.modern-icon-flipping {
 animation:modern-glass-icon-settle var(--modern-motion-switch) var(--modern-motion-ease);
 will-change:transform,opacity;
}
@keyframes modern-glass-icon-settle {
 0% { opacity:.65; transform:translateY(3px) scale(.94); }
 55% { opacity:1; transform:translateY(-1px) scale(1.025); }
 100% { opacity:1; transform:none; }
}
.prayertimes-wrapper[data-modern-glass="true"] .mwaqeet--athkar-exiting :is(.prayer,.modern-countdown-card) { animation:none; opacity:0; }
@media(prefers-reduced-motion:reduce) {
 .prayertimes-wrapper[data-modern-glass="true"] .modern-corner-icon.modern-icon-flipping { animation:none; will-change:auto; }
 .prayertimes-wrapper[data-modern-glass="true"] :is(.modern-glass-card-pending,.modern-glass-card-arriving,.modern-glass-card-withdrawing) { animation:none; opacity:1 !important; transform:none; pointer-events:auto; }
 .prayertimes-wrapper[data-modern-glass="true"] .mwaqeet--athkar-exiting :is(.prayer,.modern-countdown-card) { opacity:1; }
}

/* Static patterned Glass wallpaper: reverse light/dark tones while retaining the hue.
   This filter belongs to the background plane, never the cards or their copy.
   Card entrances and departures retain their existing opacity transitions. */
[data-theme] .prayertimes-wrapper[data-modern-style="3"] > .modern-glass-ambience {
 animation:none; transform:none; will-change:auto;
 inset:0; width:auto; height:auto;
 filter:invert(1) hue-rotate(180deg);
}
[data-theme] .prayertimes-wrapper[data-modern-style="3"] > .modern-glass-ambience {
 inset:-24px; width:auto; height:auto;
 filter:invert(1) hue-rotate(180deg) brightness(.94);
}

/* Enlarge only the stationary wallpaper/pattern plane, leaving cards untouched. */
[data-theme] .prayertimes-wrapper[data-modern-style="3"] > .modern-glass-ambience {
 transform:scale(1.3); transform-origin:center;
}

/* Patterned Glass: related mosque-palette tones with a softly disappearing ornament. */
[data-theme] .prayertimes-wrapper[data-modern-style="3"] {
 --heritage-base:color-mix(in srgb,var(--color-background) 90%,var(--color-darker_text));
 --heritage-glow:color-mix(in srgb,var(--color-darker_text) 24%,var(--color-background));
 --heritage-wash:color-mix(in srgb,var(--color-darker_text) 9%,var(--color-background));
 --heritage-wallpaper:radial-gradient(ellipse 70% 60% at 12% 18%,var(--heritage-glow),transparent 82%),radial-gradient(ellipse 60% 75% at 90% 90%,var(--heritage-wash),transparent 86%),linear-gradient(145deg,var(--heritage-base),var(--color-background));
}
[data-theme] .prayertimes-wrapper[data-modern-style="3"] > .modern-glass-ambience {
 background-color:var(--heritage-base); background-image:var(--heritage-wallpaper);
 filter:none;
}
[data-theme] .prayertimes-wrapper[data-modern-style="3"] .modern-glass-ambience > .modern-glass-ornament {
 opacity:.22;
 -webkit-mask-image:linear-gradient(150deg,#000 0%,rgba(0,0,0,.65) 28%,rgba(0,0,0,.16) 58%,transparent 84%);
 mask-image:linear-gradient(150deg,#000 0%,rgba(0,0,0,.65) 28%,rgba(0,0,0,.16) 58%,transparent 84%);
}
[data-theme] .prayertimes-wrapper[data-modern-style="3"] .modern-glass-ambience .modern-glass-repeat {
 background:var(--color-darker_text);
}
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="3"] .modern-glass-ambience > .modern-glass-ornament { opacity:.16; }
@media(prefers-contrast:more) {
 [data-theme] .prayertimes-wrapper[data-modern-style="3"] .modern-glass-ambience > .modern-glass-ornament { display:none; }
}

/* Layout audit: protect the reading area beside shallow horizontal prayer strips. */
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-style="9"][data-modern-horizontal="true"]:not([data-modern-athkar="true"]) > .mwaqeet { flex-basis:calc(39 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="9"][data-modern-horizontal="true"] > .mwaqeet > .modern-solar-header { height:calc(7 * var(--modern-unit)); flex-basis:calc(7 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="9"][data-modern-horizontal="true"] .modern-header { padding-block:calc(1 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="9"][data-modern-horizontal="true"] .modern-header .localtime { font-size:calc(10 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="9"][data-modern-horizontal="true"] .modern-header .date { font-size:calc(3.6 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="9"][data-modern-horizontal="true"] .modern-header .date-time { padding-top:calc(.4 * var(--modern-unit)); }
 .prayertimes-wrapper[data-modern-style="9"][data-modern-horizontal="true"] .modern-header #masjid_logo { height:calc(12 * var(--modern-unit)); }
}
/* Give the active dhikr priority in shallow timeline panels. The preview keeps
   its own measured row, and the final dhikr can use the unused preview space. */
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-horizontal="true"] .modern-athkar__copy { grid-template-rows:minmax(0,.7fr) minmax(0,1.3fr); gap:calc(1.2 * var(--modern-unit)); }
}
.modern-athkar__copy.modern-athkar__copy--last { grid-template-rows:0 minmax(0,1fr); gap:0; }

/* Material-inspired television surfaces: tonal roles derive from the mosque palette. */
.prayertimes-wrapper[data-modern-style="4"] { --md-primary:var(--color-darker_text); --md-on-primary:var(--color-bright_text); --md-surface:var(--color-ui); --md-on-surface:var(--color-text); --md-outline:var(--color-border); --md-container:var(--color-subtle); --modern-motion-ease:cubic-bezier(.2,0,0,1); --modern-card-line:var(--md-outline); background:var(--color-background); }
@supports (color:color-mix(in srgb,black,white)) { .prayertimes-wrapper[data-modern-style="4"] { --md-container:color-mix(in srgb,var(--md-primary) 10%,var(--md-surface)); --md-primary-container:color-mix(in srgb,var(--md-primary) 20%,var(--md-surface)); --md-outline:color-mix(in srgb,var(--color-border) 65%,var(--md-surface)); } }
.prayertimes-wrapper[data-modern-style="4"] :is(.mwaqeet,.modern-header,.modern-message,.modern-notifications-card,.modern-campaign-card,.modern-post-prayer-splash) { background:var(--md-surface); color:var(--md-on-surface); border:1px solid var(--md-outline); border-radius:calc(3.4 * var(--modern-unit)); box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.16); }
.prayertimes-wrapper[data-modern-style="4"] .prayer { background:var(--md-container); border:2px solid transparent; border-radius:calc(2.5 * var(--modern-unit)); }
.prayertimes-wrapper[data-modern-style="4"]:not([data-modern-glass="true"]) .prayer.prayer--active { background:var(--md-primary-container,var(--md-container)); border-color:var(--md-primary); }
.prayertimes-wrapper[data-modern-style="4"] .prayer:not(.prayer--active) :is(.prayer__name,.prayer__time,.prayer__image) { color:var(--md-on-surface); }
.prayertimes-wrapper[data-modern-style="4"] .prayer--active :is(.prayer__name,.prayer__time,.prayer__image) { color:var(--md-primary); }
.prayertimes-wrapper[data-modern-style="4"] :is(.modern-countdown-card,.modern-corner-icon,.campaign-notification__icon) { background:var(--md-primary); color:var(--md-on-primary); border-radius:calc(2.2 * var(--modern-unit)); }
.prayertimes-wrapper[data-modern-style="4"] .modern-card-pattern { display:none; }
.prayertimes-wrapper[data-modern-style="4"] :focus-visible { outline:3px solid var(--md-primary); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .prayertimes-wrapper[data-modern-style="4"] { --modern-motion-switch:1ms; } .prayertimes-wrapper[data-modern-style="4"] * { scroll-behavior:auto; } }

.prayertimes-wrapper[data-modern-style="4"] .material-symbol-icon { width:100%; height:100%; fill:currentColor; }
@supports (color:color-mix(in srgb,black,white)) {
 [data-theme="dark"] .prayertimes-wrapper[data-modern-style="4"] { --md-primary:color-mix(in srgb,var(--color-darker_text) 25%,var(--color-text)); --md-on-primary:var(--color-ui); }
}
/* Material 3: distinguish surfaces by tone and shape instead of outlines. */
.prayertimes-wrapper[data-modern-style="4"] {
 --md-surface-low:var(--color-ui);
 --md-surface-high:var(--color-subtle);
 --md-selected:var(--md-primary);
 --md-selected-ink:var(--md-on-primary);
}
@supports (color:color-mix(in srgb,black,white)) {
 .prayertimes-wrapper[data-modern-style="4"] {
  --md-surface-low:color-mix(in srgb,var(--md-primary) 5%,var(--color-ui));
  --md-surface-high:color-mix(in srgb,var(--md-primary) 12%,var(--color-ui));
 }
}
.prayertimes-wrapper[data-modern-style="4"]:not([data-modern-glass="true"]) :is(.mwaqeet,.modern-header,.modern-message,.modern-notifications-card,.modern-campaign-card,.modern-post-prayer-splash) {
 background:var(--md-surface-low); border:0; border-radius:calc(4 * var(--modern-unit)); box-shadow:none;
}
.prayertimes-wrapper[data-modern-style="4"] .modern-header { background:var(--md-surface-high); }
.prayertimes-wrapper[data-modern-style="4"] .prayer { background:transparent; border:0; border-radius:calc(2.8 * var(--modern-unit)); }
.prayertimes-wrapper[data-modern-style="4"]:not([data-modern-glass="true"]) .prayer.prayer--active { background:var(--md-selected); border:0; }
.prayertimes-wrapper[data-modern-style="4"] .prayer.prayer--active :is(.prayer__name,.prayer__time,.prayer__image) { color:var(--md-selected-ink); opacity:1; }
.prayertimes-wrapper[data-modern-style="4"] .prayer.prayer--active .prayer__icon::before { background:var(--md-selected-ink); opacity:.18; }
.prayertimes-wrapper[data-modern-style="4"] :is(.modern-corner-icon,.campaign-notification__icon) { background:var(--md-surface-high); color:var(--md-primary); border-radius:50%; }
.prayertimes-wrapper[data-modern-style="4"] .modern-countdown-card { background:var(--md-surface-high); color:var(--md-on-surface); border-radius:calc(3 * var(--modern-unit)); }
.prayertimes-wrapper[data-modern-style="4"] .modern-countdown-card :is(.timing-status__span--title,.timing-status__span--time) { color:var(--md-on-surface); }

/* Material Color Utilities roles seeded from the mosque primary. */
.prayertimes-wrapper[data-modern-style="4"] { --md-primary:var(--m3-primary,var(--color-darker_text)); --md-on-primary:var(--m3-on-primary,var(--color-bright_text)); --md-on-surface:var(--m3-on-surface,var(--color-text)); --md-surface-low:var(--m3-surface,var(--color-ui)); --md-surface-high:var(--m3-surface-variant,var(--color-subtle)); --md-selected:var(--m3-primary-container,var(--color-subtle)); --md-selected-ink:var(--m3-primary,var(--color-darker_text)); background:var(--m3-surface,var(--color-background)); }
@supports (color:color-mix(in srgb,black,white)) { .prayertimes-wrapper[data-modern-style="4"] { --md-selected:color-mix(in srgb,var(--m3-primary,var(--color-darker_text)) 12%,var(--m3-surface,var(--color-ui))); } }
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="4"] { --md-primary:var(--m3-primary,var(--color-text)); --md-on-primary:var(--m3-on-primary,var(--color-ui)); }
.prayertimes-wrapper[data-modern-style="4"] :is(.modern-message,.modern-campaign-card,.modern-notifications-card,.modern-header,.mwaqeet) { color:var(--md-on-surface); }
.prayertimes-wrapper[data-modern-style="4"] :is(.modern-corner-icon,.campaign-notification__icon) { color:var(--m3-on-surface-variant,var(--color-text)); }
.prayertimes-wrapper[data-modern-style="4"] .modern-corner-icon.modern-icon-flipping { animation:material-icon-arrive 400ms cubic-bezier(.2,0,0,1); }
@keyframes material-icon-arrive { from { opacity:0;transform:scale(.88); } to { opacity:1;transform:scale(1); } }
@media (prefers-reduced-motion:reduce) { .prayertimes-wrapper[data-modern-style="4"] .modern-corner-icon.modern-icon-flipping { animation:none; } }
/* Material elevated-card shadow, scoped to style 8. */
.prayertimes-wrapper[data-modern-style="4"]:not([data-modern-glass="true"]) :is(.mwaqeet,.modern-header,.modern-message,.modern-notifications-card,.modern-campaign-card,.modern-post-prayer-splash) {
 box-shadow:0 1px 2px rgba(0,0,0,.30),0 4px 12px 2px rgba(0,0,0,.15);
}

/* Weather remains unframed in every presentation style. */
.prayertimes-wrapper[data-modern-style] .city-weather,
.prayertimes-wrapper[data-modern-style] .city-weather__reading.modern-weather-reading {
 background:transparent !important; border:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.prayertimes-wrapper[data-modern-style] .city-weather::before,
.prayertimes-wrapper[data-modern-style] .city-weather::after,
.prayertimes-wrapper[data-modern-style] .city-weather__reading.modern-weather-reading::before,
.prayertimes-wrapper[data-modern-style] .city-weather__reading.modern-weather-reading::after { content:none !important; }


/* Style 8: remove the inner rectangular prayer surface. */
.prayertimes-wrapper[data-modern-style="4"][data-modern-layout] > .mwaqeet > .prayers { background:transparent; }


/* Approved Gemini presentation — style 8 only. */
/* Gemini preview */

.prayertimes-wrapper[data-modern-style="4"] { --gemini-bg:var(--m3-surface,var(--color-background)); --gemini-card:var(--color-ui); --gemini-tint:var(--m3-primary,var(--color-darker_text)); background:var(--gemini-bg); }
@supports (color:color-mix(in srgb,black,white)) {
 .prayertimes-wrapper[data-modern-style="4"] { --gemini-card:color-mix(in srgb,var(--m3-surface,var(--color-ui)) 94%,var(--gemini-tint)); --gemini-soft:color-mix(in srgb,var(--gemini-tint) 12%,var(--m3-surface,var(--color-ui))); background:radial-gradient(ellipse 60% 54% at 63% 40%,color-mix(in srgb,var(--gemini-tint) 14%,transparent),transparent 78%),var(--gemini-bg); }
}
.prayertimes-wrapper[data-modern-style="4"]:not([data-modern-glass="true"]) :is(.mwaqeet,.modern-header,.modern-message,.modern-notifications-card,.modern-campaign-card,.modern-post-prayer-splash) { background:var(--gemini-card); border:0; border-radius:calc(4.4 * var(--modern-unit)); box-shadow:0 2px 9px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.06); }
.prayertimes-wrapper[data-modern-style="4"] .modern-header { background:var(--gemini-card); }
.prayertimes-wrapper[data-modern-style="4"] .modern-countdown-card { background:var(--gemini-soft,var(--md-surface-high)); border-radius:999px; }
.prayertimes-wrapper[data-modern-style="4"] .prayer.prayer--active { border-radius:999px; }
.prayertimes-wrapper[data-modern-style="4"][data-modern-prayer-grid="true"] .prayer.prayer--active { border-radius:calc(2.8 * var(--modern-unit)); }
.prayertimes-wrapper[data-modern-style="4"] :is(.modern-corner-icon,.campaign-notification__icon) { background:var(--gemini-soft,var(--md-surface-high)); }

.prayertimes-wrapper[data-modern-style="4"] { --gemini-card:var(--color-ui) !important; }
@supports (color:color-mix(in srgb,black,white)) {
 .prayertimes-wrapper[data-modern-style="4"] {
  background-color:var(--color-background);
  background-image:radial-gradient(ellipse 44% 48% at 34% 42%,color-mix(in srgb,var(--m3-primary,var(--color-darker_text)) 19%,transparent),transparent 78%),radial-gradient(ellipse 46% 55% at 70% 60%,color-mix(in srgb,var(--color-text) 12%,transparent),transparent 80%);
  background-size:155% 155%,145% 145%;
  animation:gemini-preview-atmosphere 30s ease-in-out infinite alternate;
 }
}
@keyframes gemini-preview-atmosphere { 0% {background-position:0% 20%,100% 80%} 100% {background-position:85% 70%,10% 20%} }
@media (prefers-reduced-motion:reduce) { .prayertimes-wrapper[data-modern-style="4"] { animation:none; } }

/* Generated wallpaper belongs to the page, not the card surfaces. */
.prayertimes-wrapper[data-modern-style="4"] { background:transparent !important; animation:none !important; }
/* Mandala (style 9) inherits Heritage glass surfaces and motion behavior. */
@media(prefers-reduced-motion:reduce) { }

/* Override Heritage wallpaper sizing and fading only for Mandala. */


/* Raise Heritage's page ornament without moving its gradient or card patterns. */
[data-theme] .prayertimes-wrapper[data-modern-style="3"] .modern-glass-ambience > .modern-glass-ornament {
 top:calc(-9 * var(--modern-unit)); bottom:0;
}

/* Style 8: the countdown leads the information hierarchy. */
.prayertimes-wrapper[data-modern-style="4"] {
 --md-selected:var(--md-surface-high);
 --md-selected-ink:var(--md-primary);
}
@supports (color:color-mix(in srgb,black,white)) { .prayertimes-wrapper[data-modern-style="4"] { --md-selected:color-mix(in srgb,var(--md-primary) 14%,var(--md-surface-low)); } }
.prayertimes-wrapper[data-modern-style="4"] .modern-countdown-card {
 background:var(--md-primary); color:var(--md-on-primary);
 box-shadow:0 4px 12px color-mix(in srgb,var(--md-primary) 24%,transparent);
}
.prayertimes-wrapper[data-modern-style="4"] .modern-countdown-card :is(.timing-status__span--title,.timing-status__span--time,.clock,.clock__part,.modern-countdown-icon) {
 color:var(--md-on-primary);
}
.prayertimes-wrapper[data-modern-style="4"] .prayer.prayer--active .prayer__icon::before { background:var(--md-primary); opacity:.10; }

/* Material presentation uses portal colors, not generated Material hues. */
[data-theme] .prayertimes-wrapper[data-modern-style="4"] {
 --m3-primary:var(--color-darker_text);
 --m3-on-primary:var(--color-ui);
 --m3-on-surface:var(--color-text);
 --m3-on-surface-variant:var(--color-text);
 --m3-surface:var(--color-ui);
 --m3-surface-variant:color-mix(in srgb,var(--color-darker_text) 12%,var(--color-ui));
 --md-primary:var(--color-darker_text);
 --md-on-primary:var(--color-ui);
 --md-on-surface:var(--color-text);
 --md-outline:color-mix(in srgb,var(--color-border) 65%,var(--color-ui));
}
@supports (color:color-mix(in srgb,black,white)) {
 [data-theme] .prayertimes-wrapper[data-modern-style="4"]:not([data-modern-glass="true"]) .prayer.prayer--active {
  background:color-mix(in srgb,var(--color-darker_text) 14%,var(--color-ui));
 }
}

/* Portal roles are shared; surface opacity, shine and shadow recipes stay local. */
[data-theme] .prayertimes-wrapper[data-modern-style] {
 --modern-ink:var(--color-text);
 --modern-accent:var(--color-darker_text);
 --modern-main-foreground:var(--color-darker_text);
 --glass-ink:var(--color-text);
}

/* Center the title and its icon inside the full countdown row in every style.
   Keep Qomra's measured optical correction on the text itself. */
.prayertimes-wrapper[data-modern-style] .modern-countdown-card { align-items:center; }
.prayertimes-wrapper[data-modern-style] .modern-countdown-card .timing-status__span--title {
 display:flex; align-items:center; align-self:stretch;
 height:auto; margin-block:0; padding-block:0; transform:none;
}
.prayertimes-wrapper[data-modern-style] .modern-countdown-card .timing-status__span--title > .timing-status__icon { align-self:center; margin-block:0; }
.prayertimes-wrapper[data-modern-style] .modern-countdown-card .timing-status__span--title > .modern-optical-label {
 top:0;
}

/* Classic: inner information groups echo the shared outer frame. Rounded inner
   corners avoid competing with its notched silhouette while retaining one material. */
[data-theme] .prayertimes-wrapper[data-modern-style="8"][data-modern-layout] > .mwaqeet,
[data-theme] .prayertimes-wrapper[data-modern-style="8"][data-modern-layout] :is(.modern-notifications-card,.modern-campaign-card) {
 position:relative;isolation:isolate;background:transparent;
 border:0;border-radius:0;
 box-shadow:none;
}
[data-theme] .prayertimes-wrapper[data-modern-style="8"][data-modern-layout] > .mwaqeet { padding:0; }
[data-theme] .prayertimes-wrapper[data-modern-style="8"][data-modern-layout] > .mwaqeet > .prayers {
 border-radius:0;overflow:hidden;
}
.prayertimes-wrapper[data-modern-style="8"] .modern-classic-inner-frame {
 position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none;
}
.prayertimes-wrapper[data-modern-style="8"] :is(.mwaqeet,.modern-notifications-card,.modern-campaign-card) > :not(.modern-classic-inner-frame) {
 position:relative;z-index:1;
}

/* Material TV: paired tonal icon roles and a coherent circular shape family.
   These badges identify content; they are not interactive icon buttons. */
[data-theme] .prayertimes-wrapper[data-modern-style="4"] {
 --modern-motion-switch:800ms;
 --modern-motion-ease:cubic-bezier(.2,0,0,1);
 --md-icon-container:color-mix(in srgb,var(--color-darker_text) 12%,var(--color-ui));
 --md-icon-ink:var(--color-darker_text);
}
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="4"] {
 --md-icon-ink:color-mix(in srgb,var(--color-darker_text) 55%,var(--color-text));
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.modern-corner-icon,.campaign-notification__icon) {
 background:var(--md-icon-container); color:var(--md-icon-ink);
 border:0; border-radius:50%; box-shadow:none;
 display:flex; align-items:center; justify-content:center;
}
.prayertimes-wrapper[data-modern-style="4"] .modern-corner-icon__art { width:100%; height:100%; transform:none; }
.prayertimes-wrapper[data-modern-style="4"] .modern-corner-icon svg { fill:none; }
.prayertimes-wrapper[data-modern-style="4"] .prayer__icon::before {
 border-radius:50%; background:var(--md-icon-container); opacity:1;
}
.prayertimes-wrapper[data-modern-style="4"] .prayer.prayer--active .prayer__icon::before {
 border-radius:50%; background:var(--color-darker_text); opacity:.12;
}
.prayertimes-wrapper[data-modern-style="4"] .notification__event-tag {
 background:var(--md-icon-container); color:var(--md-icon-ink); border:0; box-shadow:none;
}
/* A stable badge with a small content acknowledgement, rather than a 3D flip. */
.prayertimes-wrapper[data-modern-style="4"] .modern-corner-icon.modern-icon-flipping { animation:none; will-change:auto; }
.prayertimes-wrapper[data-modern-style="4"] .modern-icon-flipping .modern-corner-icon__art {
 animation:material-tv-icon-settle 250ms cubic-bezier(.2,0,0,1);
}
@keyframes material-tv-icon-settle {
 from {opacity:.35; transform:translateY(3px) scale(.92);}
 to {opacity:1; transform:none;}
}
.prayertimes-wrapper[data-modern-style="4"] .modern-card-slide-enter-from,
.prayertimes-wrapper[data-modern-style="4"] .modern-campaign-card.modern-campaign-enter-from {
 opacity:0; transform:translateY(12px);
}
.prayertimes-wrapper[data-modern-style="4"] .modern-card-slide-leave-to,
.prayertimes-wrapper[data-modern-style="4"] .modern-campaign-card.modern-campaign-leave-to { opacity:0; transform:none; }
.prayertimes-wrapper[data-modern-style="4"] .modern-campaign-enter-active .campaign-notification__icon {
 animation:material-tv-icon-settle 250ms cubic-bezier(.2,0,0,1);
}
@media(prefers-reduced-motion:reduce) {
 [data-theme] .prayertimes-wrapper[data-modern-style="4"] { --modern-motion-switch:0ms; }
 .prayertimes-wrapper[data-modern-style="4"] :is(.modern-icon-flipping .modern-corner-icon__art,.modern-campaign-enter-active .campaign-notification__icon) {animation:none;}
 .prayertimes-wrapper[data-modern-style="4"] :is(.modern-card-slide-enter-from,.modern-campaign-card.modern-campaign-enter-from) {transform:none;}
}

/* Material dark roles lift the same portal Main hue for readable foregrounds;
   the countdown uses the inverse paired surface ink. No new palette is added. */
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="4"] {
 --md-primary:color-mix(in srgb,var(--color-darker_text) 55%,var(--color-text));
 --modern-main-foreground:var(--md-primary);
 --modern-accent:var(--md-primary);
 --md-icon-ink:var(--md-primary);
}

/* Material motion roles: same token vocabulary, distinct entrance/exit behavior. */
[data-theme] .prayertimes-wrapper[data-modern-style="4"] {
 --md-motion-enter:800ms; --md-motion-exit:320ms; --md-motion-small:300ms; --md-motion-copy-exit:220ms;
 --md-ease-enter:cubic-bezier(.05,.7,.1,1);
 --md-ease-exit:cubic-bezier(.3,0,.8,.15);
 --md-ease-standard:cubic-bezier(.2,0,0,1);
}
.prayertimes-wrapper[data-modern-style="4"] .modern-content-stage > .modern-card-slide-enter-active,
.prayertimes-wrapper[data-modern-style="4"] .modern-campaign-card.modern-campaign-enter-active,
.prayertimes-wrapper[data-modern-style="4"] .modern-athkar-slide-enter-active {
 transition:opacity var(--md-motion-enter) var(--md-ease-enter),transform var(--md-motion-enter) var(--md-ease-enter);
}
.prayertimes-wrapper[data-modern-style="4"] .modern-content-stage > .modern-card-slide-leave-active,
.prayertimes-wrapper[data-modern-style="4"] .modern-campaign-stage > .modern-campaign-card.modern-campaign-leave-active,
.prayertimes-wrapper[data-modern-style="4"] .modern-athkar-slide-leave-active {
 transition:opacity var(--md-motion-exit) var(--md-ease-exit),transform var(--md-motion-exit) var(--md-ease-exit);
}
.prayertimes-wrapper[data-modern-style="4"] > .fade-enter-active {
 transition:opacity var(--md-motion-enter) var(--md-ease-enter),transform var(--md-motion-enter) var(--md-ease-enter);
}
.prayertimes-wrapper[data-modern-style="4"] > .fade-leave-active {
 transition:opacity var(--md-motion-exit) var(--md-ease-exit),transform var(--md-motion-exit) var(--md-ease-exit);
}
.prayertimes-wrapper[data-modern-style="4"] > .fade-enter-from {opacity:0;transform:translateY(12px);}
.prayertimes-wrapper[data-modern-style="4"] > .fade-leave-to {opacity:0;transform:none;}
.prayertimes-wrapper[data-modern-style="4"] .modern-athkar-slide-enter-from {opacity:0;transform:translateY(-12px);}
.prayertimes-wrapper[data-modern-style="4"] .modern-athkar-slide-leave-to {opacity:0;transform:translateY(12px);}
.prayertimes-wrapper[data-modern-style="4"] .modern-hadith-copy {transform:none;transition:opacity var(--md-hadith-enter,1200ms) cubic-bezier(.22,.61,.36,1),transform var(--md-hadith-enter,1200ms) cubic-bezier(.22,.61,.36,1);}
.prayertimes-wrapper[data-modern-style="4"] .modern-hadith-copy--leaving {transform:translateY(calc(-.55 * var(--modern-unit))) scale(.985);transition:opacity var(--md-hadith-exit,600ms) ease-in-out,transform var(--md-hadith-exit,600ms) cubic-bezier(.4,0,1,1);}
.prayertimes-wrapper[data-modern-style="4"] :is(.modern-icon-flipping .modern-corner-icon__art,.modern-campaign-enter-active .campaign-notification__icon) {
 animation-duration:var(--md-motion-small); animation-timing-function:var(--md-ease-enter);
}
.prayertimes-wrapper[data-modern-style="4"] .modern-athkar__rail[data-athkar-dot-ready="true"]::after {
 transition:transform var(--md-motion-enter) var(--md-ease-standard);
}
.prayertimes-wrapper[data-modern-style="4"] .prayer {
 transition:background-color var(--md-motion-small) var(--md-ease-standard),color var(--md-motion-small) var(--md-ease-standard);
}
.prayertimes-wrapper[data-modern-style="4"] .notification__bullet {
 transition:width var(--md-motion-small) var(--md-ease-standard),opacity var(--md-motion-small) var(--md-ease-standard);
}
.prayertimes-wrapper[data-modern-style="4"] .mwaqeet--athkar-exiting :is(.prayer,.modern-countdown-card) {
 animation-name:material-tv-prayers-return; animation-duration:var(--md-motion-enter); animation-timing-function:var(--md-ease-enter);
}
@keyframes material-tv-prayers-return {from {opacity:0;transform:translateY(-12px);} to {opacity:1;transform:none;}}
/* Adhkar controls share the Material tonal container rather than a solid accent. */
[data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.modern-athkar__footer,.modern-athkar__count) {
 background:var(--md-icon-container); color:var(--md-icon-ink); border:0; box-shadow:none;
}
@media(prefers-reduced-motion:reduce) {
 [data-theme] .prayertimes-wrapper[data-modern-style="4"] {--md-motion-enter:0ms;--md-motion-exit:0ms;--md-motion-small:0ms;--md-motion-copy-exit:0ms;}
 .prayertimes-wrapper[data-modern-style="4"] :is(.modern-athkar-slide-enter-from,.modern-athkar-slide-leave-to,.fade-enter-from) {transform:none;}
}

/* One Material surface recipe includes both fullscreen states and the timeline. */
[data-theme] .prayertimes-wrapper[data-modern-style="4"] {
 --md-card-background:var(--gemini-card,var(--color-ui));
 --md-card-radius:calc(4.4 * var(--modern-unit));
 --md-card-shadow:0 2px 9px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.06);
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.mwaqeet,.modern-header,.modern-message,.modern-notifications-card,.modern-campaign-card,.splash) {
 background:var(--md-card-background); color:var(--color-text);
 border:0; border-radius:var(--md-card-radius); box-shadow:var(--md-card-shadow);
}
.prayertimes-wrapper[data-modern-style="4"] .splash > :is(.splash__prayer,.splash__azkar) {
 background:transparent; border:0; box-shadow:none;
}
.prayertimes-wrapper[data-modern-style="4"] .sub-splash-enter-active {
 transition:opacity var(--md-motion-enter) var(--md-ease-enter),transform var(--md-motion-enter) var(--md-ease-enter);
}
.prayertimes-wrapper[data-modern-style="4"] .sub-splash-leave-active {
 transition:opacity var(--md-motion-exit) var(--md-ease-exit),transform var(--md-motion-exit) var(--md-ease-exit);
}
.prayertimes-wrapper[data-modern-style="4"] .sub-splash-enter-from {opacity:0;transform:translateY(12px);}
.prayertimes-wrapper[data-modern-style="4"] .sub-splash-leave-to {opacity:0;transform:none;}
@media(prefers-reduced-motion:reduce) {
 .prayertimes-wrapper[data-modern-style="4"] .sub-splash-enter-from {transform:none;}
}

/* Modern: derive the page wash and ornament from the four portal roles.
   Legacy background/pattern presets may carry an unrelated mosque palette.
   Preserve the existing ornament opacity/mask and all card surface recipes. */
body:has(.prayertimes-wrapper[data-modern-style="7"]) {
 background-color:color-mix(in srgb,var(--color-darker_text) 6%,var(--color-ui));
 --color-pattern:color-mix(in srgb,var(--color-darker_text) 24%,var(--color-ui));
}

/* Heritage uses the portal Background role while preserving its existing layers. */
[data-theme] .prayertimes-wrapper[data-modern-style="3"] {
 --heritage-base:color-mix(in srgb,var(--color-ui) 90%,var(--color-darker_text));
 --heritage-glow:color-mix(in srgb,var(--color-darker_text) 24%,var(--color-ui));
 --heritage-wash:color-mix(in srgb,var(--color-darker_text) 9%,var(--color-ui));
 --heritage-wallpaper:radial-gradient(ellipse 70% 60% at 12% 18%,var(--heritage-glow),transparent 82%),radial-gradient(ellipse 60% 75% at 90% 90%,var(--heritage-wash),transparent 86%),linear-gradient(145deg,var(--heritage-base),var(--color-ui));
}

/* Glass, Amber and Heritage: fuller frost, retaining the existing optical layers. */
@supports (color:color-mix(in srgb,white,transparent)) {
 @media (prefers-reduced-transparency:no-preference) and (prefers-contrast:no-preference) {
  [data-theme] .prayertimes-wrapper:is([data-modern-style="1"],[data-modern-style="2"],[data-modern-style="3"])[data-modern-glass="true"][data-modern-layout] {
   --glass-surface:color-mix(in srgb,var(--color-ui) 80%,transparent);
   --glass-reading:var(--glass-surface);
   --glass-notification-surface:var(--glass-surface);
  }
  [data-theme] .prayertimes-wrapper:is([data-modern-style="1"],[data-modern-style="2"],[data-modern-style="3"])[data-modern-glass="true"][data-modern-layout] :is(.mwaqeet,.modern-header,.modern-message,.modern-notifications-card,.modern-post-prayer-splash) {
   background-color:var(--glass-surface);
  }
 }
}

/* Wide prayer strips: countdown shares the prayer row in public layouts 5–7. */
@media(min-aspect-ratio:1/1) {
 [data-theme] .prayertimes-wrapper[data-modern-style][data-modern-horizontal="true"]:not([data-modern-athkar="true"]) > .mwaqeet:not(.mwaqeet--athkar-exiting) {
  display:grid;grid-template-columns:minmax(0,1fr) minmax(calc(26 * var(--modern-unit)),22%);
  grid-template-rows:minmax(0,1fr);align-items:stretch;flex-basis:calc(26 * var(--modern-unit));
 }
 [data-theme] .prayertimes-wrapper[data-modern-style="9"][data-modern-horizontal="true"]:not([data-modern-athkar="true"]) > .mwaqeet:not(.mwaqeet--athkar-exiting) {flex-basis:calc(34 * var(--modern-unit));grid-template-rows:auto minmax(0,1fr);}
 [data-theme] .prayertimes-wrapper[data-modern-style][data-modern-horizontal="true"] > .mwaqeet > .modern-solar-header {grid-column:1 / -1;}
 [data-theme] .prayertimes-wrapper[data-modern-style][data-modern-horizontal="true"] > .mwaqeet > .modern-countdown-card {
  width:100%;min-width:0;min-height:0;height:100%;flex-basis:auto;flex-direction:column;
  align-items:center;justify-content:center;gap:calc(1.2 * var(--modern-unit));padding:calc(1 * var(--modern-unit));
 }
 [data-theme] .prayertimes-wrapper[data-modern-style][data-modern-horizontal="true"] .mwaqeet .modern-countdown-card .timing-status__span--title {font-size:calc(3.8 * var(--modern-unit));text-align:center;}
 [data-theme] .prayertimes-wrapper[data-modern-style][data-modern-horizontal="true"] .mwaqeet .modern-countdown-card :is(.clock,.clock__part) {font-size:calc(7.4 * var(--modern-unit));}
}

@media(min-aspect-ratio:1/1) {
 [data-theme] .prayertimes-wrapper[data-modern-style][data-modern-horizontal="true"] .mwaqeet .modern-countdown-card .timing-status__span--title {
  display:flex;align-items:center;justify-content:center;align-self:center;width:100%;flex:0 0 auto;text-align:center;
 }
 [data-theme] .prayertimes-wrapper[data-modern-style][data-modern-horizontal="true"] .mwaqeet .modern-countdown-card::before {content:none;}
}

/* Solar: the live sky is now the countdown's atmospheric background. The
   information remains on a quiet contrast veil, while the orbit stays visible. */
[data-theme] .prayertimes-wrapper[data-modern-style="9"] .modern-countdown-card {
 position:relative; isolation:isolate; overflow:hidden;
 flex-basis:calc(17 * var(--modern-unit));min-height:calc(17 * var(--modern-unit));
 background:var(--color-darker_text); color:var(--color-bright_text);
 border-color:color-mix(in srgb,var(--color-border) 62%,transparent);
 box-shadow:0 calc(1.2 * var(--modern-unit)) calc(3.6 * var(--modern-unit)) calc(-1.8 * var(--modern-unit)) color-mix(in srgb,var(--color-text) 24%,transparent);
}
.prayertimes-wrapper[data-modern-style="9"] .modern-countdown-card > :not(.modern-solar-countdown) {position:relative;z-index:2;}
.prayertimes-wrapper[data-modern-style="9"] .modern-solar-countdown {
 position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none;
}
.prayertimes-wrapper[data-modern-style="9"] .modern-solar-countdown::after {
 content:"";position:absolute;inset:0;
 background:linear-gradient(90deg,color-mix(in srgb,var(--color-text) 38%,transparent),transparent 48%,color-mix(in srgb,var(--color-text) 26%,transparent));
 box-shadow:inset 0 1px 0 color-mix(in srgb,var(--color-bright_text) 30%,transparent);
}
.prayertimes-wrapper[data-modern-style="9"] .modern-solar-countdown > .solar__canvas {display:block;width:100%;height:100%;}
.prayertimes-wrapper[data-modern-style="9"] .modern-countdown-card :is(.timing-status__span--title,.timing-status__span--time,.clock,.clock__part,.timing-status__icon) {
 color:var(--color-bright_text);text-shadow:0 1px 3px color-mix(in srgb,var(--color-text) 58%,transparent);
}
@media(min-aspect-ratio:1/1) {
 [data-theme] .prayertimes-wrapper[data-modern-style="9"][data-modern-horizontal="true"]:not([data-modern-athkar="true"]) > .mwaqeet:not(.mwaqeet--athkar-exiting) {
  flex-basis:calc(29 * var(--modern-unit));grid-template-rows:minmax(0,1fr);
 }
}

/* Material's wide prayer strip uses rounded rectangles instead of capsules. */
@media(min-aspect-ratio:1/1) {
 [data-theme] .prayertimes-wrapper[data-modern-style="4"][data-modern-horizontal="true"][data-modern-layout] :is(.prayer.prayer--active,.mwaqeet > .modern-countdown-card) {border-radius:calc(2.5 * var(--modern-unit));}
}

/* Material wallpaper: compatible with older TV WebViews and offline packages. */
.prayertimes-wrapper:is([data-modern-style="3"],[data-modern-style="4"]) > .modern-material-wallpaper {
 position:fixed;inset:0;z-index:-2;pointer-events:none;
 background-color:var(--color-ui);
 background-image:var(--material-wallpaper-image,url('/v2/views/designs/masjidi-modern/gemini-soft-wallpaper-v1.webp'));
 background-position:center;background-size:cover;background-repeat:no-repeat;
}
[data-theme="dark"] .prayertimes-wrapper:is([data-modern-style="3"],[data-modern-style="4"]) > .modern-material-wallpaper {
 background-color:var(--color-ui);background-blend-mode:soft-light;
}
@supports (color:color-mix(in srgb,black,white)) {
 [data-theme="dark"] .prayertimes-wrapper:is([data-modern-style="3"],[data-modern-style="4"]) > .modern-material-wallpaper {background-color:color-mix(in srgb,var(--color-background) 85%,var(--color-ui));}
}

/* Style 8: portal-colored flowing light, with the approved wallpaper as texture. */
[data-theme] .prayertimes-wrapper:is([data-modern-style="3"],[data-modern-style="4"]) > .modern-material-wallpaper {
 isolation:isolate;overflow:hidden;background:var(--color-ui);background-blend-mode:normal;
}
.prayertimes-wrapper:is([data-modern-style="3"],[data-modern-style="4"]) > .modern-material-wallpaper::before,
.prayertimes-wrapper:is([data-modern-style="3"],[data-modern-style="4"]) > .modern-material-wallpaper::after {
 content:"";position:absolute;pointer-events:none;transform-origin:center;
}
.prayertimes-wrapper:is([data-modern-style="3"],[data-modern-style="4"]) > .modern-material-wallpaper::before {
 inset:-8%;background-image:var(--material-wallpaper-image);background-position:center;background-size:cover;
 filter:grayscale(1);mix-blend-mode:multiply;opacity:.72;
 animation:material-wallpaper-texture-drift 32s ease-in-out infinite alternate;
}
.prayertimes-wrapper:is([data-modern-style="3"],[data-modern-style="4"]) > .modern-material-wallpaper::after {
 inset:-16%;
 background-image:radial-gradient(ellipse 60% 70% at 12% 25%,var(--color-darker_text),transparent 70%),radial-gradient(ellipse 55% 60% at 90% 78%,var(--color-border),transparent 72%),radial-gradient(ellipse 45% 65% at 65% 12%,var(--color-text),transparent 75%);
 opacity:.32;animation:material-theme-light-flow 20s cubic-bezier(.45,0,.55,1) infinite alternate;
}
[data-theme="dark"] .prayertimes-wrapper:is([data-modern-style="3"],[data-modern-style="4"]) > .modern-material-wallpaper::before {mix-blend-mode:screen;opacity:.30;}
[data-theme="dark"] .prayertimes-wrapper:is([data-modern-style="3"],[data-modern-style="4"]) > .modern-material-wallpaper::after {opacity:.44;}
@keyframes material-wallpaper-texture-drift {
 from{transform:translate3d(-2%,-1%,0) scale(1.02);}to{transform:translate3d(2%,1%,0) scale(1.06);}
}
@keyframes material-theme-light-flow {
 0%{transform:translate3d(-6%,-3%,0) rotate(-5deg) scale(1.03);}
 50%{transform:translate3d(1%,4%,0) rotate(0deg) scale(1.08);}
 100%{transform:translate3d(6%,-1%,0) rotate(5deg) scale(1.03);}
}
@media(prefers-reduced-motion:reduce) {
 .prayertimes-wrapper:is([data-modern-style="3"],[data-modern-style="4"]) > .modern-material-wallpaper::before,
 .prayertimes-wrapper:is([data-modern-style="3"],[data-modern-style="4"]) > .modern-material-wallpaper::after {animation:none;transform:none;}
}

@media(prefers-reduced-motion:reduce){.prayertimes-wrapper[data-modern-style="4"]{--md-hadith-enter:0ms;--md-hadith-exit:0ms;}}

/* Style 8 message surfaces share the softer Hadith rhythm. */
.prayertimes-wrapper[data-modern-style="4"] .modern-content-stage > .modern-card-slide-enter-active,
.prayertimes-wrapper[data-modern-style="4"] .modern-campaign-card.modern-campaign-enter-active {
 transition:opacity var(--md-hadith-enter,1200ms) cubic-bezier(.22,.61,.36,1),transform var(--md-hadith-enter,1200ms) cubic-bezier(.22,.61,.36,1);
}
.prayertimes-wrapper[data-modern-style="4"] .modern-content-stage > .modern-card-slide-leave-active,
.prayertimes-wrapper[data-modern-style="4"] .modern-campaign-stage > .modern-campaign-card.modern-campaign-leave-active {
 transition:opacity var(--md-hadith-exit,600ms) ease-in-out,transform var(--md-hadith-exit,600ms) ease-in-out;
}

/* Align the QR footer with the announcement's reading edge in both languages. */
.prayertimes-wrapper[data-modern-style] .modern-notifications-card .notification__qr-details {
 inset-inline-start:calc(13.7 * var(--modern-unit));
 max-width:calc(100% - 19.7 * var(--modern-unit));
}
@media(min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-style][data-modern-horizontal="true"] .modern-notifications-card .notification__qr-details {
  inset:auto; max-width:none;
 }
}

/* Mandala cards share Glass surfaces and optical treatment. */
/* Masjidi Modern — TV presentation. All colors follow the mosque's palette.
   The base stylesheet retains slideshow, clock and prayer-state transitions. */
/* Keep mobile text inflation from changing the fitted TV layout after first paint. */
/* Qomra's Mursala alternates, as enabled by the legacy theme. */
/* Keep the decorative page layer above the body paint and behind every card. */
/* Swap the existing active/inactive icon inks without changing their badges. */
/* Approved artwork carries its own consistent optical scale and spacing. */
/* Content switches share one duration/easing; clock ticks and progress are time signals. */
/* Each slide gets a bounded text region, separate from the QR footer. */

/* Independent content cards share the prayer panel's elevation. */

/* Let the outer card shadows paint beyond their layout wrappers. */
/* Restore the hadith typography used before the card separation. */

/* Muted progress stays behind the capsule's label and countdown. */

/* Darkened theme text is reserved for announcement titles. */
/* A calm half-turn every 10 seconds; each turn lasts 800ms like other theme motion. */
/* A faster 720ms ringing burst, followed by a 5.28-second rest. */

/* Qomra's Latin ink sits above its centered line box; balance it optically. */

/* Balance Qomra's numeral ink around the capsule center. */

/* Clearer outer card edges and elevation for TV viewing. */

/* A shorter countdown capsule with more legible labels. */

/* Restore the earlier soft outer-card shadow. */

/* Matching muted icon containers; corner icons stay outside content flow. */



/* More space around the announcement and hadith corner icons. */

/* Crossfade the outgoing panel beneath the incoming panel on the shared timing. */

/* Preserve the hadith type hierarchy while fitting within its padded area. */

/* Legacy ornament, limited to the lower 50% and fading upward behind content. */

/* Reverse the existing theme colors for the three content-card icon badges. */

/* Prayer time values use the normal theme text color. */

/* Give every announcement slide more breathing room above its content. */

/* Reverse the previous quote orientation; the whole-badge flip stays independent. */

/* Slightly smaller logo, centered in its existing header column. */

/* Qomra lacks U+FDFA; enlarge the existing salawat artwork in the Hadith heading. */

/* Put the leading icon beside a reserved text column, in either text direction. */

/* White rounded QR badge, aligned to the right of announcement slides. */

/* Restore the softer icon badge in the notification below the Hadith. */

/* Align the QR badge with the text column after the leading icon. */

/* Plain schedule row and a microphone beside the lecturer's name. */

/* The badge leads a separate side column in either text direction. */

/* The card padding keeps all heading and body rows beside the icon. */

/* Anchor the notification's info badge to the top of the content row. */

/* Match the visible date gap, compensating for the microphone's inset artwork. */

/* QR at the reading-start edge, with the caption aligned toward it in each language. */

/* Weather and the calculated moon share one stable slot, in sync with the date. */

/* Realistic transparent weather artwork, sized consistently for TV. */

/* Unframed sky artwork with a stable area for the weather/moon fade. */

/* Larger sky artwork may overflow the header without resizing its grid row. */

/* Oversized artwork with a temperature badge over the bottom of the weather icon. */
/* Move only the artwork around a tiny circle, keeping it upright and the degree still. */
/* Weather artwork and its separate reading fit inside the header; the moon keeps its own position. */
/* Sky artwork is an overlay and must never determine the header row height. */
/* Clear the inherited grid area: absolute sky insets must use the whole header, not its first content row. */
/* Modern temperature numerals use the same digits face as the clock/prayer values. */

/* A larger moon can extend beyond the header's leading edge. */

/* URL layout presets retain card sizes and content transitions. */

/* Horizontal prayers: full-width content above a bottom prayer strip. */
/* Portrait keeps the bottom strip readable as two rows of three cards. */

/* Horizontal layouts have one countdown: beside the header on TV, below prayers in portrait. */
/* Side selection applies to landscape; portrait keeps the readable stacked layout. */

/* Layout 5 moves the horizontal prayer panel above the remaining content. */

/* Adaptive dark-mode treatment. Light palettes retain their existing colors. */

/* Layout 6: logo/date, prayers, then the rotating content panel. */
/* Keep the stationary announcement badge above the transformed carousel slides. */
/* A little more room above the app notification content. */

/* Event badges share the announcement icon's height in every layout. */

/* Time-aware event status stays readable and follows the theme palette. */
/* Keep event metadata compact while the QR occupies its own footer. */

/* Event metadata keeps its responsive sizing with a calmer maximum across styles. */

/* Keep lecturer before the schedule, sharing a row on landscape TV layouts. */

/* Match the Hadith side column and keep the badge above moving carousel slides. */

/* Status, headings, and body copy share the content column beside the icon. */
@media (min-aspect-ratio:1/1) {
 /* The shallower horizontal layouts use a narrower icon column. */
}
/* Both cards use matching icon badges and a clear 3.5-unit text gap. */
/* Match the Smartbox badge and text spacing without widening the QR gap. */

/* Give the iqama label a little more breathing room beside or above its clock. */

/* A theme-colored border marks the current/next prayer; every prayer shares its fill.
   Reserve identical border width on inactive prayers to keep content positions stable. */
/* Give the highlighted prayer a visibly deeper shade even when both palette tokens match. */

/* Default-style two-column prayer panels, with the countdown below the grid. */

/* Keep the compact notification icon's original layout, updating only its colors. */

/* Slide the next full card over the still-visible outgoing card, with no empty phase. */
/* The post-prayer timeline occupies the existing timetable frame in all layouts. */
/* A single prayer card contains both the prayer list and its countdown footer. */

/* Qomra short-label optical alignment: measured per text and font size.
   Position preserves layout dimensions and existing multiline line heights.
   Reset historical manual transforms so corrections are never added twice. */
/* Shared TV elevation: a defined contact shadow and a soft, compact falloff.
   Keep the nested countdown flush with its parent prayer card. */
/* Hadith-fit measures the visible clearance below the heading, including tashkeel. */
/* A quiet inset weather surface; keep artwork sizing and header height intact. */
/* Align the reading start with the Hadith card, including event-badge slides. */

/* Reuse the Hadith ornament behind post-prayer adhkar, without affecting layout. */

/* Adhkar leaves upward while the timetable returns, sharing the page motion token. */

/* Style 2: the original legacy ornament unifies the existing layout in one frame.
   Its corner.svg and tip.svg are already bundled, including downloaded screens. */

/* Keep compact framed TV layouts readable without squeezing their prayer rows. */

/* Approved prayer-icon motion: only the highlighted prayer animates. Artwork and badges stay fixed. */
/* Keep the original artwork size and compact header; only separate the reading. *//* Landscape: slightly larger weather artwork with a tighter temperature gap. */
/* Inset the weather surface evenly; preserve artwork and reading geometry. */
/* Classic current prayer: a simple rounded highlight in every layout. */
/* Lift Classic information group slightly within its shared frame. */
/* Classic frame and panel borders follow the palette text color. */
/* Classic stacked prayers: tighter row gaps and clearance above the bottom frame. */
/* Classic weather sits directly on the shared frame. */
/* Classic bordered announcement and notification surfaces match the main frame. */
/* Match the raised Classic content's bottom clearance at its outer reading edge. */
/* Layout 6 flattens the info wrapper; apply its clearance to the visible panels. */
/* Classic announcements reuse Modern's existing faded pattern layer. */

/* Solar Horizon lives exclusively in the prayer card's header. */
/* Horizontal strips reserve room for the new header, without touching the other styles. */
/* The Solar sky meets the prayer card edges; the rows retain their inner padding. */
/* Pin Modern's original card treatment independently of Classic and Solar. */
/* Modern-only elevation: a soft ambient falloff and a restrained contact edge. */
/* Modern current-prayer emphasis. */
/* Modern horizontal presets: preserve space for readable message content. */

/* Modern: current prayer artwork and title share the exact same ink token. */
/* Modern current-prayer outline follows its title and artwork ink. */
/* Modern current-prayer badge shares the title ink; artwork contrasts with its fill. */
/* Modern current-prayer badge: muted title-colored surface and matching artwork. */
/* Modern prayer badges share a consistent muted title-ink surface. */
/* Modern weather artwork matches the current-prayer title ink. */
/* Modern post-prayer surface uses the same card treatment as the main screen. */
/* One compact weather unit: a prominent icon beside a vertically centered reading.
   Its overlay remains independent of the header's content-driven height. */
/* Improve second-line readability in notification cards across every style. */
/* Improve QR caption readability while retaining its bold action and vertical alignment. */
/* Larger announcement pagination with a clearer active pill. */
/* Modern weather artwork and temperature sit directly on the logo card. */

/* Glass (style 5). An independent material system; no existing style is changed.
   A softly lit environment, frosted reading planes, and a single tinted focal layer.
   Large static blur surfaces only: never animate backdrop-filter on a TV GPU. */
/* No second glass sheet behind the content cards. */
/* Equal row geometry; the active row is a single inset lens, not a nested card. */
/* Countdown is the strongest accent, with a broad optical reflection. Text never blurs. */
/* Keep QR quiet zones opaque, independent of the material behind the card. */
/* Match Modern's compact layout refinements without inheriting its borders/shadows. */
/* Entrance inherits the established 800ms page rhythm. Existing carousel/timeline
   controllers retain ownership of their DOM; no extra swapping timers or out-in gaps. */

/* Glass only — a genuine seamless tile, never stretch the complete artwork.
   A shared tile size preserves the scale of the geometry across page and cards.
   The outer layers fade; their inner masks repeat independently on both axes. */
/* A quieter etched footer on reading surfaces, leaving their text area calm. */

/* Glass wallpaper collection: quiet iOS-inspired depth, separate from card etching.
   These declarations are exclusive to Glass; no image requests in styles 1–4. */

/* Glass audit: keep a single material plane, with the original mosque hue at night. */
/* Static frost softens wallpaper contours behind copy without fading the copy.
   Match the existing header; never animate these backdrop filters. */

/* Glass layout audit: retain optical label alignment without touching the next
   line, and keep the countdown's line box inside the shallow horizontal footer. */
/* Qomra numerals need the same ink-centering correction in horizontal footers. */
/* All styles: public layouts 5–7 use a shallow, full-width content card.
   Put QR and copy in one row. Logical grid columns
   mirror automatically in English; portrait keeps its existing QR footer. */

/* Heritage: a Main-color background with broad Background-color pools of light. */

/* Glass stays clean; Heritage shares its tested material/layout and owns ornament. */

/* Glass wallpaper only: slow, shallow drift. Overscan prevents exposed edges.
   Move one composited background plane; do not animate text, filters or layout. */

/* Amber Glass: the second wallpaper, clean cards and the shared Glass motion.
   Dim the light artwork in dark mode without changing its shape or theme hue. */

/* Amber uses the original main theme color, distinct from Glass's dark accent.
   Keep the original palette token at night rather than tinting with pale text. */

/* Heritage only: a rotating square larger than the viewport diagonal prevents
   exposed corners at every angle. Cards remain on their stationary glass plane. */
/* Blur the color pools independently so the fine ornament remains legible. */

/* Color roles only: retain every styles original surface and Glass edges. */
/* Heritage content frost: 20px blur, retaining original borders and shadows. */

/* Style 5: consistent glass, halfway between the light and reading frost. */
@supports (color:color-mix(in srgb,white,transparent)) {
}
@media(prefers-reduced-transparency:reduce), (prefers-contrast:more) {
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
}

/* Glass accent details keep their original lens alpha and shadow geometry. */

/* Explicit prayer color roles across every style, independent of surface ink. */
/* Classic marks the current prayer with a quiet Main-color fill, without an edge. */

/* Logo, Smartbox and post-prayer views share the original logo frost. */
@supports (color:color-mix(in srgb,white,transparent)) {
}
@media(prefers-reduced-transparency:reduce), (prefers-contrast:more) {
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
}

/* Glass 5–7 completion: one motion vocabulary, stable reading surfaces, and
   thin tinted overlays. Preserve each style's established frost and wallpaper. */
@supports(color:color-mix(in srgb,white,transparent)) {
}
/* A notification changes content inside a persistent lens; never stack two
   translucent card backgrounds while their messages crossfade. */
/* A brief exit hands off promptly to the full, staggered Glass entrance. */
/* Tinted details share the Main role across all three materials. Inner overlays
   have no second backdrop blur, preserving the existing neutral edge shine. */


/* Compact weather metric: a distinct rain/humidity icon and percentage. */

/* Nudge only the humidity value; the metric icon keeps its original position. */

/* Material Symbols are filled vector paths, including the small metric icons. */

/* Keep weather numerals compact without changing their font or layout. */

/* Larger Glass prayer content retains room inside compact and grid rows. */

/* Glass content badges gain breathing room; their inner artwork stays the same size. */

/* Each Glass surface owns its entrance; shared parent fades stay out of its way. */
/* The old timetable surface has finished exiting before Vue swaps its key.
   Its retained leave node must not occupy a second flex/grid slot. */
/* Fullscreen exits hand off to the prepared, staggered main cards promptly. */
/* Glass badges acknowledge a content change with a restrained lift and settle. */

/* Static patterned Glass wallpaper: reverse light/dark tones while retaining the hue.
   This filter belongs to the background plane, never the cards or their copy.
   Card entrances and departures retain their existing opacity transitions. */

/* Enlarge only the stationary wallpaper/pattern plane, leaving cards untouched. */

/* Patterned Glass: related mosque-palette tones with a softly disappearing ornament. */

/* Layout audit: protect the reading area beside shallow horizontal prayer strips. */
/* Give the active dhikr priority in shallow timeline panels. The preview keeps
   its own measured row, and the final dhikr can use the unused preview space. */

/* Material-inspired television surfaces: tonal roles derive from the mosque palette. */
/* Material 3: distinguish surfaces by tone and shape instead of outlines. */

/* Material Color Utilities roles seeded from the mosque primary. */
/* Material elevated-card shadow, scoped to style 8. */

/* Weather remains unframed in every presentation style. */


/* Style 8: remove the inner rectangular prayer surface. */


/* Approved Gemini presentation — style 8 only. */
/* Gemini preview */

/* Generated wallpaper belongs to the page, not the card surfaces. */
/* Mandala (style 9) inherits Heritage glass surfaces and motion behavior. */

/* Override Heritage wallpaper sizing and fading only for Mandala. */


/* Raise Heritage's page ornament without moving its gradient or card patterns. */

/* Style 8: the countdown leads the information hierarchy. */

/* Material presentation uses portal colors, not generated Material hues. */

/* Portal roles are shared; surface opacity, shine and shadow recipes stay local. */

/* Center the title and its icon inside the full countdown row in every style.
   Keep Qomra's measured optical correction on the text itself. */

/* Material TV: paired tonal icon roles and a coherent circular shape family.
   These badges identify content; they are not interactive icon buttons. */
/* A stable badge with a small content acknowledgement, rather than a 3D flip. */

/* Material dark roles lift the same portal Main hue for readable foregrounds;
   the countdown uses the inverse paired surface ink. No new palette is added. */

/* Material motion roles: same token vocabulary, distinct entrance/exit behavior. */
/* Adhkar controls share the Material tonal container rather than a solid accent. */

/* One Material surface recipe includes both fullscreen states and the timeline. */

/* Modern: derive the page wash and ornament from the four portal roles.
   Legacy background/pattern presets may carry an unrelated mosque palette.
   Preserve the existing ornament opacity/mask and all card surface recipes. */

/* Heritage uses the portal Background role while preserving its existing layers. */

/* Glass, Amber and Heritage: fuller frost, retaining the existing optical layers. */
@supports (color:color-mix(in srgb,white,transparent)) {
 @media (prefers-reduced-transparency:no-preference) and (prefers-contrast:no-preference) {
  [data-theme] .prayertimes-wrapper:is([data-modern-style="2"],[data-modern-style="3"])[data-modern-glass="true"][data-modern-layout] {
   --glass-surface:color-mix(in srgb,var(--color-ui) 80%,transparent);
   --glass-reading:var(--glass-surface);
   --glass-notification-surface:var(--glass-surface);
  }
  [data-theme] .prayertimes-wrapper:is([data-modern-style="2"],[data-modern-style="3"])[data-modern-glass="true"][data-modern-layout] :is(.mwaqeet,.modern-header,.modern-message,.modern-notifications-card,.modern-post-prayer-splash) {
   background-color:var(--glass-surface);
  }
 }
}

/* Wide prayer strips: countdown shares the prayer row in public layouts 5–7. */

/* Material's wide prayer strip uses rounded rectangles instead of capsules. */

/* Material wallpaper: compatible with older TV WebViews and offline packages. */

/* Style 8: portal-colored flowing light, with the approved wallpaper as texture. */

/* Style 8 message surfaces share the softer Hadith rhythm. */

/* Align the QR footer with the announcement's reading edge in both languages. */

/* Style 9: supplied vector ornament, illuminated with portal theme colors. */
/* Canonical Glass card material for Styles 4–6.
   Preserve each style's wallpaper and ornament; unify only the card material. */
@supports (color:color-mix(in srgb,white,transparent)) {
 [data-theme="light"] .prayertimes-wrapper:is([data-modern-style="1"],[data-modern-style="2"],[data-modern-style="3"])[data-modern-glass="true"] {
  --glass-surface:color-mix(in srgb,var(--color-ui) 76%,transparent);
  --glass-reading:color-mix(in srgb,var(--color-ui) 90%,transparent);
  --glass-notification-surface:var(--glass-reading);
  --glass-edge:color-mix(in srgb,var(--color-border) 32%,transparent);
  --glass-highlight:color-mix(in srgb,var(--color-border) 10%,rgba(255,255,255,.32));
  --glass-shadow:0 2px 5px rgba(22,30,40,.05),0 14px 36px -16px rgba(22,30,40,.24);
 }
 [data-theme="dark"] .prayertimes-wrapper:is([data-modern-style="1"],[data-modern-style="2"],[data-modern-style="3"])[data-modern-glass="true"] {
  --glass-surface:color-mix(in srgb,var(--color-ui) 84%,transparent);
  --glass-reading:color-mix(in srgb,var(--color-ui) 94%,transparent);
  --glass-notification-surface:var(--glass-reading);
  --glass-edge:color-mix(in srgb,var(--color-border) 30%,transparent);
  --glass-highlight:color-mix(in srgb,var(--color-border) 12%,rgba(255,255,255,.12));
  --glass-shadow:0 2px 5px #0002,0 18px 40px -14px #0008;
 }
 [data-theme="light"] .prayertimes-wrapper:is([data-modern-style="1"],[data-modern-style="2"],[data-modern-style="3"])[data-modern-glass="true"][data-modern-glass-tone="light"] {
  --glass-edge:color-mix(in srgb,var(--color-border) 15%,rgba(255,255,255,.68));
  --glass-highlight:rgba(255,255,255,.72);
 }
}
[data-theme] .prayertimes-wrapper:is([data-modern-style="1"],[data-modern-style="2"],[data-modern-style="3"])[data-modern-glass="true"][data-modern-layout] :is(.mwaqeet,.modern-message,.modern-notifications-card,.modern-post-prayer-splash) {
 background-color:var(--glass-reading);
 background-image:none;
 border:1.5px solid var(--glass-edge);
 box-shadow:inset 0 1px 0 var(--glass-highlight),var(--glass-shadow);
 -webkit-backdrop-filter:none;
 backdrop-filter:none;
}
[data-theme] .prayertimes-wrapper:is([data-modern-style="1"],[data-modern-style="2"],[data-modern-style="3"])[data-modern-glass="true"] .modern-header {
 background-color:var(--glass-surface);
 background-image:none;
 border:1.5px solid var(--glass-edge);
 box-shadow:inset 0 1px 0 var(--glass-highlight),var(--glass-shadow);
 -webkit-backdrop-filter:blur(20px) saturate(125%);
 backdrop-filter:blur(20px) saturate(125%);
}
[data-theme] .prayertimes-wrapper:is([data-modern-style="1"],[data-modern-style="2"],[data-modern-style="3"])[data-modern-glass="true"] .modern-campaign-stage::before {
 background:var(--glass-reading);
 background-image:none;
 border:1.5px solid var(--glass-edge);
 box-shadow:inset 0 1px 0 var(--glass-highlight),var(--glass-shadow);
 -webkit-backdrop-filter:none;
 backdrop-filter:none;
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
 [data-theme] .prayertimes-wrapper:is([data-modern-style="1"],[data-modern-style="2"],[data-modern-style="3"])[data-modern-glass="true"] {
  --glass-surface:var(--color-ui); --glass-reading:var(--color-ui); --glass-notification-surface:var(--color-ui);
 }
 [data-theme] .prayertimes-wrapper:is([data-modern-style="1"],[data-modern-style="2"],[data-modern-style="3"])[data-modern-glass="true"] .modern-header {
  -webkit-backdrop-filter:none; backdrop-filter:none;
 }
}
/* Heritage keeps its ornament above the shared Material/Gemini wallpaper.
   Its former rotating color plane is disabled so only the pattern remains. */
[data-theme] .prayertimes-wrapper[data-modern-style="3"] > .modern-glass-ambience {
 inset:0; left:0; top:0; width:auto; height:auto;
 transform:none; animation:none; filter:none; will-change:auto;
 background:none;
}
[data-theme] .prayertimes-wrapper[data-modern-style="3"] > .modern-glass-ambience::before { content:none; }
/* Heritage uses a livelier version of the shared flowing wallpaper. */
.prayertimes-wrapper[data-modern-style="3"] > .modern-material-wallpaper::before {
 animation-duration:22s;
}
.prayertimes-wrapper[data-modern-style="3"] > .modern-material-wallpaper::after {
 animation-duration:14s;
}
.prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper::before {
 animation:none;
 opacity:.40;
}
.prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper::after {
 animation-name:material-style4-light-flow;
 animation-duration:11s;
}
.prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper {
 --style4-layer-main:var(--color-darker_text);
 --style4-layer-secondary:var(--color-border);
 --style4-layer-tertiary:var(--color-text);
 --style4-layer-accent:var(--color-pattern);
 background-color:var(--color-background);
 background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--color-text) 10%,transparent) .55px,transparent .75px);
 background-size:4px 4px;
}
@supports (color:color-mix(in srgb,black,white)) {
 [data-theme="light"] .prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper {
  background-color:color-mix(in srgb,var(--color-background) 97%,var(--color-darker_text) 3%);
 }
}
.prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper::after {
 inset:-10%;
 background-image:
  radial-gradient(ellipse at center,color-mix(in srgb,var(--color-darker_text) 72%,transparent) 0%,color-mix(in srgb,var(--color-darker_text) 24%,transparent) 42%,transparent 74%),
  radial-gradient(ellipse at center,color-mix(in srgb,var(--color-border) 64%,transparent) 0%,color-mix(in srgb,var(--color-text) 18%,transparent) 44%,transparent 76%),
  radial-gradient(ellipse at center,color-mix(in srgb,var(--material-companion-color,var(--color-border)) 68%,transparent) 0%,color-mix(in srgb,var(--material-companion-color,var(--color-border)) 20%,transparent) 45%,transparent 76%);
 background-position:-18% 4%,118% 96%,58% -18%;
 background-size:78% 90%,72% 84%,62% 72%;
 background-repeat:no-repeat;
 filter:blur(calc(.9 * var(--modern-unit)));
 opacity:.54;
}
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper {
 background-color:color-mix(in srgb,color-mix(in srgb,var(--color-background) 93%,var(--color-darker_text)) 96%,var(--color-text));
 background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--color-border) 12%,transparent) .55px,transparent .75px);
}
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper::before { opacity:.18; }
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper::after { opacity:.62; }
.prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper::after { content:none; }
.prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper > .modern-material-glow {
 position:absolute; left:-25vmax; top:-25vmax; width:50vmax; height:50vmax;
 display:block; border-radius:50%; pointer-events:none; opacity:.46;
 background:radial-gradient(circle at center,currentColor 0%,transparent 72%);
 background:radial-gradient(circle at center,currentColor 0%,color-mix(in srgb,currentColor 46%,transparent) 38%,transparent 72%);
 transform:translate3d(var(--glow-x0,8vw),var(--glow-y0,8vh),0) scale(.96);
 animation:material-independent-glow 22s cubic-bezier(.45,0,.55,1) infinite;
}
.prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper > .modern-material-glow--main {
 --glow-x0:8vw; --glow-y0:8vh; --glow-x1:66vw; --glow-y1:60vh; --glow-x2:76vw; --glow-y2:12vh; --glow-x3:8vw; --glow-y3:8vh;
 color:var(--style4-layer-main); animation-duration:22s;
}
.prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper > .modern-material-glow--border {
 --glow-x0:72vw; --glow-y0:10vh; --glow-x1:14vw; --glow-y1:62vh; --glow-x2:48vw; --glow-y2:72vh; --glow-x3:72vw; --glow-y3:10vh;
 color:var(--style4-layer-secondary); opacity:.38; animation-duration:25s;
}
.prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper > .modern-material-glow--companion {
 --glow-x0:20vw; --glow-y0:70vh; --glow-x1:74vw; --glow-y1:20vh; --glow-x2:10vw; --glow-y2:20vh; --glow-x3:20vw; --glow-y3:70vh;
 color:var(--style4-layer-tertiary); opacity:.34; animation-duration:28s;
}
.prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper > .modern-material-glow--accent {
 left:-19vmax; top:-19vmax; width:38vmax; height:38vmax;
 color:var(--style4-layer-accent); opacity:.26;
 animation:material-accent-glow-route 31s cubic-bezier(.45,0,.55,1) infinite;
}
.prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper--dynamic > .modern-material-glow {
 animation:none;
 transition:none;
}
.prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper--still > .modern-material-glow {
 transform:translate(var(--glow-x0,48vw),var(--glow-y0,74vh));
}
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper > .modern-material-glow {
 mix-blend-mode:normal;
 opacity:.42;
}
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper > .modern-material-glow--border { opacity:.30; }
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper > .modern-material-glow--companion { opacity:.18; }
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper > .modern-material-glow--accent { opacity:.24; }
@keyframes material-independent-glow {
 0% { transform:translate3d(var(--glow-x0,8vw),var(--glow-y0,8vh),0) scale(.94); }
 33.333% { transform:translate3d(var(--glow-x1,58vw),var(--glow-y1,34vh),0) scale(1.04); }
 66.667% { transform:translate3d(var(--glow-x2,24vw),var(--glow-y2,62vh),0) scale(.97); }
 100% { transform:translate3d(var(--glow-x3,8vw),var(--glow-y3,8vh),0) scale(.94); }
}
/* The fourth layer crosses the shared field only briefly, then peels away on
   an offset diagonal route so all four fields never fully stack. */
@keyframes material-accent-glow-route {
 0% { transform:translate3d(48vw,74vh,0) scale(.92); }
 27% { transform:translate3d(4vw,38vh,0) scale(1.03); }
 58% { transform:translate3d(46vw,2vh,0) scale(.96); }
 82% { transform:translate3d(84vw,48vh,0) scale(1.04); }
 100% { transform:translate3d(48vw,74vh,0) scale(.92); }
}
@keyframes material-style4-light-flow {
 0% {
  transform:scale(1.02);
  background-position:-18% 4%,118% 96%,58% -18%;
 }
 50% {
  transform:scale(1.08);
  background-position:62% 86%,34% -12%,108% 58%;
 }
 100% {
  transform:scale(1.025);
  background-position:118% 22%,-18% 78%,-12% 92%;
 }
}
@media(prefers-reduced-motion:reduce) {
 .prayertimes-wrapper[data-modern-style="4"] > .modern-material-wallpaper > .modern-material-glow { animation:none; }
}

/* Hadith and announcement artwork uses one Lucide outline recipe in every style.
   Containers retain their style-specific surface, radius, color and motion. */
[data-theme] .prayertimes-wrapper[data-modern-style] :is(.modern-message,.modern-notifications-card) > .modern-corner-icon {
 padding:0;
}
[data-theme] .prayertimes-wrapper[data-modern-style] :is(.modern-message,.modern-notifications-card) .modern-corner-icon__art {
 display:grid; place-items:center;
 width:72%; height:72%; margin:auto;
}
[data-theme] .prayertimes-wrapper[data-modern-style] :is(.modern-message,.modern-notifications-card) .modern-corner-icon svg {
 display:block; width:100%; height:100%;
 fill:none !important; stroke:currentColor !important;
 stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
[data-theme] .prayertimes-wrapper[data-modern-style] :is(.modern-message,.modern-notifications-card) .modern-corner-icon svg * {
 fill:none !important; stroke:currentColor !important;
}
/* Material announcement megaphone faces inward like the other styles. */
[data-theme] .prayertimes-wrapper[data-modern-style="4"] .modern-notifications-card .modern-corner-icon__art {
 transform:scaleX(-1);
}
/* Material prayer badges echo their title color with a quiet tonal fill. */
[data-theme] .prayertimes-wrapper[data-modern-style="4"] .prayer:not(.prayer--active) .prayer__icon::before {
 background:color-mix(in srgb,var(--color-text) 12%,var(--color-ui));
 opacity:1;
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] .prayer.prayer--active .prayer__icon::before {
 background:color-mix(in srgb,var(--color-darker_text) 12%,var(--color-ui));
 opacity:1;
}
/* Material announcement acknowledgement: a soft emphasized-scale entrance with
   a tonal halo. The container moves; the Lucide artwork remains optically stable. */
[data-theme] .prayertimes-wrapper[data-modern-style="4"] {
 --md-scene-spatial-duration:var(--modern-motion-switch);
 --md-scene-effect-duration:calc(var(--modern-motion-switch) * .4);
 --md-scene-spatial-spring:cubic-bezier(.16,1,.3,1);
 --md-scene-effect-ease:cubic-bezier(.4,0,1,1);
}
@keyframes material-card-arrive {
 0% {opacity:0;transform:translateY(calc(1.2 * var(--modern-unit))) scale(.965);}
 58% {opacity:1;transform:translateY(calc(.22 * var(--modern-unit))) scale(.994);}
 100% {opacity:1;transform:none;}
}
@keyframes material-card-withdraw {
 from {opacity:var(--modern-glass-exit-opacity,1);transform:var(--modern-glass-exit-transform,none);}
 to {opacity:0;transform:translateY(calc(-.55 * var(--modern-unit))) scale(.985);}
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] .modern-glass-card-pending {
 opacity:0 !important;pointer-events:none;
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] .modern-glass-card-arriving {
 animation:material-card-arrive var(--modern-card-arrival-duration,var(--md-scene-spatial-duration)) var(--md-scene-spatial-spring) var(--modern-glass-arrival-delay,0ms) both;
 transition:none !important;
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] .modern-glass-card-withdrawing {
 animation:material-card-withdraw var(--modern-card-exit-duration,var(--md-scene-effect-duration)) var(--md-scene-effect-ease) var(--modern-glass-departure-delay,0ms) both;
 transition:none !important;
 pointer-events:none;
}
/* The controller owns entrances so Vue's generic fades cannot double-animate
   the same Material surface. Outgoing content keeps its short effect motion. */
[data-theme] .prayertimes-wrapper[data-modern-style="4"] > :is(.info,.mwaqeet,.splash.modern-post-prayer-splash):is(.fade-enter-active,.fade-enter-from,.fade-enter-to),
[data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.modern-athkar-view,.splash__azkar):is(.modern-athkar-slide-enter-active,.modern-athkar-slide-enter-from,.modern-athkar-slide-enter-to,.sub-splash-enter-active,.sub-splash-enter-from,.sub-splash-enter-to),
[data-theme] .prayertimes-wrapper[data-modern-style="4"] .modern-content-stage > :is(.modern-card-slide-enter-active,.modern-card-slide-enter-from,.modern-card-slide-enter-to) {
 opacity:1;transform:none;transition:none;
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] > .mwaqeet.fade-leave-active {display:none;}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.modern-message > .modern-corner-icon,.modern-notifications-card .modern-corner-icon) {
 clip-path:polygon(48.10% 5.94%,51.90% 5.94%,59.97% 18.42%,65.28% 20.62%,79.81% 17.50%,82.50% 20.19%,79.38% 34.72%,81.58% 40.03%,94.06% 48.10%,94.06% 51.90%,81.58% 59.97%,79.38% 65.28%,82.50% 79.81%,79.81% 82.50%,65.28% 79.38%,59.97% 81.58%,51.90% 94.06%,48.10% 94.06%,40.03% 81.58%,34.72% 79.38%,20.19% 82.50%,17.50% 79.81%,20.62% 65.28%,18.42% 59.97%,5.94% 51.90%,5.94% 48.10%,18.42% 40.03%,20.62% 34.72%,17.50% 20.19%,20.19% 17.50%,34.72% 20.62%,40.03% 18.42%);
 border-radius:0;
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.modern-notifications-card .modern-corner-icon.modern-icon-flipping,.modern-message > .modern-corner-icon.modern-icon-flipping) {
 animation:material-icon-container-star 500ms cubic-bezier(.2,0,0,1) both;
 will-change:clip-path,transform,opacity;
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] .modern-notifications-card .modern-icon-flipping .modern-corner-icon__art {
 animation:none;
}
@keyframes material-icon-container-star {
 0% {
  opacity:.35;transform:rotate(-45deg) scale(.88);
  clip-path:polygon(50.00% 3.00%,50.00% 3.00%,67.99% 6.58%,67.99% 6.58%,83.23% 16.77%,83.23% 16.77%,93.42% 32.01%,93.42% 32.01%,97.00% 50.00%,97.00% 50.00%,93.42% 67.99%,93.42% 67.99%,83.23% 83.23%,83.23% 83.23%,67.99% 93.42%,67.99% 93.42%,50.00% 97.00%,50.00% 97.00%,32.01% 93.42%,32.01% 93.42%,16.77% 83.23%,16.77% 83.23%,6.58% 67.99%,6.58% 67.99%,3.00% 50.00%,3.00% 50.00%,6.58% 32.01%,6.58% 32.01%,16.77% 16.77%,16.77% 16.77%,32.01% 6.58%,32.01% 6.58%);
 }
 100% {
  opacity:1;transform:none;
  clip-path:polygon(48.10% 5.94%,51.90% 5.94%,59.97% 18.42%,65.28% 20.62%,79.81% 17.50%,82.50% 20.19%,79.38% 34.72%,81.58% 40.03%,94.06% 48.10%,94.06% 51.90%,81.58% 59.97%,79.38% 65.28%,82.50% 79.81%,79.81% 82.50%,65.28% 79.38%,59.97% 81.58%,51.90% 94.06%,48.10% 94.06%,40.03% 81.58%,34.72% 79.38%,20.19% 82.50%,17.50% 79.81%,20.62% 65.28%,18.42% 59.97%,5.94% 51.90%,5.94% 48.10%,18.42% 40.03%,20.62% 34.72%,17.50% 20.19%,20.19% 17.50%,34.72% 20.62%,40.03% 18.42%);
 }
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] .modern-message > .modern-corner-icon.modern-icon-flipping { will-change:clip-path,transform,opacity; }
[data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.modern-message > .modern-corner-icon,.modern-notifications-card .modern-corner-icon) {
 clip-path:polygon(50.00% 3.00%,53.79% 6.67%,56.34% 14.05%,58.54% 18.12%,62.48% 15.70%,68.38% 10.58%,73.50% 9.30%,74.95% 14.37%,73.46% 22.04%,73.33% 26.67%,77.96% 26.54%,85.63% 25.05%,90.70% 26.50%,89.42% 31.62%,84.30% 37.52%,81.88% 41.46%,85.95% 43.66%,93.33% 46.21%,97.00% 50.00%,93.33% 53.79%,85.95% 56.34%,81.88% 58.54%,84.30% 62.48%,89.42% 68.38%,90.70% 73.50%,85.63% 74.95%,77.96% 73.46%,73.33% 73.33%,73.46% 77.96%,74.95% 85.63%,73.50% 90.70%,68.38% 89.42%,62.48% 84.30%,58.54% 81.88%,56.34% 85.95%,53.79% 93.33%,50.00% 97.00%,46.21% 93.33%,43.66% 85.95%,41.46% 81.88%,37.52% 84.30%,31.62% 89.42%,26.50% 90.70%,25.05% 85.63%,26.54% 77.96%,26.67% 73.33%,22.04% 73.46%,14.37% 74.95%,9.30% 73.50%,10.58% 68.38%,15.70% 62.48%,18.12% 58.54%,14.05% 56.34%,6.67% 53.79%,3.00% 50.00%,6.67% 46.21%,14.05% 43.66%,18.12% 41.46%,15.70% 37.52%,10.58% 31.62%,9.30% 26.50%,14.37% 25.05%,22.04% 26.54%,26.67% 26.67%,26.54% 22.04%,25.05% 14.37%,26.50% 9.30%,31.62% 10.58%,37.52% 15.70%,41.46% 18.12%,43.66% 14.05%,46.21% 6.67%);
}
@keyframes material-icon-container-star {
 0% { opacity:1;transform:rotate(-30deg) scale(.92);clip-path:polygon(50.00% 3.00%,54.10% 3.18%,58.16% 3.71%,62.16% 4.60%,66.07% 5.83%,69.86% 7.40%,73.50% 9.30%,76.96% 11.50%,80.21% 14.00%,83.23% 16.77%,86.00% 19.79%,88.50% 23.04%,90.70% 26.50%,92.60% 30.14%,94.17% 33.93%,95.40% 37.84%,96.29% 41.84%,96.82% 45.90%,97.00% 50.00%,96.82% 54.10%,96.29% 58.16%,95.40% 62.16%,94.17% 66.07%,92.60% 69.86%,90.70% 73.50%,88.50% 76.96%,86.00% 80.21%,83.23% 83.23%,80.21% 86.00%,76.96% 88.50%,73.50% 90.70%,69.86% 92.60%,66.07% 94.17%,62.16% 95.40%,58.16% 96.29%,54.10% 96.82%,50.00% 97.00%,45.90% 96.82%,41.84% 96.29%,37.84% 95.40%,33.93% 94.17%,30.14% 92.60%,26.50% 90.70%,23.04% 88.50%,19.79% 86.00%,16.77% 83.23%,14.00% 80.21%,11.50% 76.96%,9.30% 73.50%,7.40% 69.86%,5.83% 66.07%,4.60% 62.16%,3.71% 58.16%,3.18% 54.10%,3.00% 50.00%,3.18% 45.90%,3.71% 41.84%,4.60% 37.84%,5.83% 33.93%,7.40% 30.14%,9.30% 26.50%,11.50% 23.04%,14.00% 19.79%,16.77% 16.77%,19.79% 14.00%,23.04% 11.50%,26.50% 9.30%,30.14% 7.40%,33.93% 5.83%,37.84% 4.60%,41.84% 3.71%,45.90% 3.18%); }
 100% { opacity:1;transform:none;clip-path:polygon(50.00% 3.00%,53.79% 6.67%,56.34% 14.05%,58.54% 18.12%,62.48% 15.70%,68.38% 10.58%,73.50% 9.30%,74.95% 14.37%,73.46% 22.04%,73.33% 26.67%,77.96% 26.54%,85.63% 25.05%,90.70% 26.50%,89.42% 31.62%,84.30% 37.52%,81.88% 41.46%,85.95% 43.66%,93.33% 46.21%,97.00% 50.00%,93.33% 53.79%,85.95% 56.34%,81.88% 58.54%,84.30% 62.48%,89.42% 68.38%,90.70% 73.50%,85.63% 74.95%,77.96% 73.46%,73.33% 73.33%,73.46% 77.96%,74.95% 85.63%,73.50% 90.70%,68.38% 89.42%,62.48% 84.30%,58.54% 81.88%,56.34% 85.95%,53.79% 93.33%,50.00% 97.00%,46.21% 93.33%,43.66% 85.95%,41.46% 81.88%,37.52% 84.30%,31.62% 89.42%,26.50% 90.70%,25.05% 85.63%,26.54% 77.96%,26.67% 73.33%,22.04% 73.46%,14.37% 74.95%,9.30% 73.50%,10.58% 68.38%,15.70% 62.48%,18.12% 58.54%,14.05% 56.34%,6.67% 53.79%,3.00% 50.00%,6.67% 46.21%,14.05% 43.66%,18.12% 41.46%,15.70% 37.52%,10.58% 31.62%,9.30% 26.50%,14.37% 25.05%,22.04% 26.54%,26.67% 26.67%,26.54% 22.04%,25.05% 14.37%,26.50% 9.30%,31.62% 10.58%,37.52% 15.70%,41.46% 18.12%,43.66% 14.05%,46.21% 6.67%); }
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] .modern-message .modern-icon-flipping .modern-corner-icon__art {
 animation:none;
}
@media(prefers-reduced-motion:reduce) {
 [data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.modern-notifications-card .modern-corner-icon.modern-icon-flipping,.modern-message > .modern-corner-icon.modern-icon-flipping) {
  animation:none;will-change:auto;
 }
 [data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.modern-glass-card-pending,.modern-glass-card-arriving,.modern-glass-card-withdrawing) {
  animation:none;opacity:1 !important;transform:none;pointer-events:auto;
 }
}

/* Match the notification badge's real content box: its layout padding was
   retained while the direct Hadith badge had been reset to zero padding. */
[data-theme] .prayertimes-wrapper[data-modern-style="4"] .modern-message > .modern-corner-icon .modern-corner-icon__art {
 width:72%;height:72%;
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] .modern-notifications-card .modern-corner-icon .modern-corner-icon__art {
 width:72%;height:72%;
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] .modern-campaign-card .campaign-notification__icon > svg {
 width:72%;height:72%;
}

[data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.modern-message > .modern-corner-icon,.modern-notifications-card .modern-corner-icon) {
 clip-path:polygon(50.00% 3.00%,54.10% 3.18%,58.16% 3.71%,62.16% 4.60%,66.07% 5.83%,69.86% 7.40%,73.50% 9.30%,76.96% 11.50%,80.21% 14.00%,83.23% 16.77%,86.00% 19.79%,88.50% 23.04%,90.70% 26.50%,92.60% 30.14%,94.17% 33.93%,95.40% 37.84%,96.29% 41.84%,96.82% 45.90%,97.00% 50.00%,96.82% 54.10%,96.29% 58.16%,95.40% 62.16%,94.17% 66.07%,92.60% 69.86%,90.70% 73.50%,88.50% 76.96%,86.00% 80.21%,83.23% 83.23%,80.21% 86.00%,76.96% 88.50%,73.50% 90.70%,69.86% 92.60%,66.07% 94.17%,62.16% 95.40%,58.16% 96.29%,54.10% 96.82%,50.00% 97.00%,45.90% 96.82%,41.84% 96.29%,37.84% 95.40%,33.93% 94.17%,30.14% 92.60%,26.50% 90.70%,23.04% 88.50%,19.79% 86.00%,16.77% 83.23%,14.00% 80.21%,11.50% 76.96%,9.30% 73.50%,7.40% 69.86%,5.83% 66.07%,4.60% 62.16%,3.71% 58.16%,3.18% 54.10%,3.00% 50.00%,3.18% 45.90%,3.71% 41.84%,4.60% 37.84%,5.83% 33.93%,7.40% 30.14%,9.30% 26.50%,11.50% 23.04%,14.00% 19.79%,16.77% 16.77%,19.79% 14.00%,23.04% 11.50%,26.50% 9.30%,30.14% 7.40%,33.93% 5.83%,37.84% 4.60%,41.84% 3.71%,45.90% 3.18%);border-radius:50%;
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.modern-message > .modern-corner-icon.modern-icon-morphed,.modern-notifications-card .modern-corner-icon.modern-icon-morphed) {
 clip-path:polygon(50.00% 3.00%,53.79% 6.67%,56.34% 14.05%,58.54% 18.12%,62.48% 15.70%,68.38% 10.58%,73.50% 9.30%,74.95% 14.37%,73.46% 22.04%,73.33% 26.67%,77.96% 26.54%,85.63% 25.05%,90.70% 26.50%,89.42% 31.62%,84.30% 37.52%,81.88% 41.46%,85.95% 43.66%,93.33% 46.21%,97.00% 50.00%,93.33% 53.79%,85.95% 56.34%,81.88% 58.54%,84.30% 62.48%,89.42% 68.38%,90.70% 73.50%,85.63% 74.95%,77.96% 73.46%,73.33% 73.33%,73.46% 77.96%,74.95% 85.63%,73.50% 90.70%,68.38% 89.42%,62.48% 84.30%,58.54% 81.88%,56.34% 85.95%,53.79% 93.33%,50.00% 97.00%,46.21% 93.33%,43.66% 85.95%,41.46% 81.88%,37.52% 84.30%,31.62% 89.42%,26.50% 90.70%,25.05% 85.63%,26.54% 77.96%,26.67% 73.33%,22.04% 73.46%,14.37% 74.95%,9.30% 73.50%,10.58% 68.38%,15.70% 62.48%,18.12% 58.54%,14.05% 56.34%,6.67% 53.79%,3.00% 50.00%,6.67% 46.21%,14.05% 43.66%,18.12% 41.46%,15.70% 37.52%,10.58% 31.62%,9.30% 26.50%,14.37% 25.05%,22.04% 26.54%,26.67% 26.67%,26.54% 22.04%,25.05% 14.37%,26.50% 9.30%,31.62% 10.58%,37.52% 15.70%,41.46% 18.12%,43.66% 14.05%,46.21% 6.67%);border-radius:0;
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.modern-notifications-card .modern-corner-icon.modern-icon-flipping,.modern-message > .modern-corner-icon.modern-icon-flipping) {
 animation-duration:800ms;
}
@keyframes material-icon-container-star {
 0% {opacity:1;transform:rotate(-38deg) scale(.94);clip-path:polygon(50.00% 3.00%,54.10% 3.18%,58.16% 3.71%,62.16% 4.60%,66.07% 5.83%,69.86% 7.40%,73.50% 9.30%,76.96% 11.50%,80.21% 14.00%,83.23% 16.77%,86.00% 19.79%,88.50% 23.04%,90.70% 26.50%,92.60% 30.14%,94.17% 33.93%,95.40% 37.84%,96.29% 41.84%,96.82% 45.90%,97.00% 50.00%,96.82% 54.10%,96.29% 58.16%,95.40% 62.16%,94.17% 66.07%,92.60% 69.86%,90.70% 73.50%,88.50% 76.96%,86.00% 80.21%,83.23% 83.23%,80.21% 86.00%,76.96% 88.50%,73.50% 90.70%,69.86% 92.60%,66.07% 94.17%,62.16% 95.40%,58.16% 96.29%,54.10% 96.82%,50.00% 97.00%,45.90% 96.82%,41.84% 96.29%,37.84% 95.40%,33.93% 94.17%,30.14% 92.60%,26.50% 90.70%,23.04% 88.50%,19.79% 86.00%,16.77% 83.23%,14.00% 80.21%,11.50% 76.96%,9.30% 73.50%,7.40% 69.86%,5.83% 66.07%,4.60% 62.16%,3.71% 58.16%,3.18% 54.10%,3.00% 50.00%,3.18% 45.90%,3.71% 41.84%,4.60% 37.84%,5.83% 33.93%,7.40% 30.14%,9.30% 26.50%,11.50% 23.04%,14.00% 19.79%,16.77% 16.77%,19.79% 14.00%,23.04% 11.50%,26.50% 9.30%,30.14% 7.40%,33.93% 5.83%,37.84% 4.60%,41.84% 3.71%,45.90% 3.18%);border-radius:50%;}
 48% {opacity:1;transform:rotate(-16deg) scale(1);clip-path:polygon(50.00% 4.00%,53.98% 4.55%,57.74% 6.11%,61.14% 8.43%,64.13% 11.19%,66.78% 14.01%,69.27% 16.63%,71.80% 18.86%,74.58% 20.71%,77.70% 22.30%,81.13% 23.88%,84.69% 25.71%,88.11% 28.00%,91.03% 30.87%,93.17% 34.29%,94.30% 38.13%,94.38% 42.17%,93.52% 46.19%,92.00% 50.00%,90.16% 53.51%,88.34% 56.76%,86.84% 59.87%,85.77% 63.02%,85.10% 66.37%,84.64% 70.00%,84.12% 73.89%,83.22% 77.88%,81.70% 81.70%,79.41% 85.05%,76.38% 87.67%,72.73% 89.37%,68.72% 90.14%,64.60% 90.12%,60.60% 89.57%,56.85% 88.83%,53.34% 88.23%,50.00% 88.00%,46.66% 88.23%,43.15% 88.83%,39.40% 89.57%,35.40% 90.12%,31.28% 90.14%,27.27% 89.37%,23.62% 87.67%,20.59% 85.05%,18.30% 81.70%,16.78% 77.88%,15.88% 73.89%,15.36% 70.00%,14.90% 66.37%,14.23% 63.02%,13.16% 59.87%,11.66% 56.76%,9.84% 53.51%,8.00% 50.00%,6.48% 46.19%,5.62% 42.17%,5.70% 38.13%,6.83% 34.29%,8.97% 30.87%,11.89% 28.00%,15.31% 25.71%,18.87% 23.88%,22.30% 22.30%,25.42% 20.71%,28.20% 18.86%,30.73% 16.63%,33.22% 14.01%,35.87% 11.19%,38.86% 8.43%,42.26% 6.11%,46.02% 4.55%);border-radius:26%;}
 64% {opacity:1;transform:rotate(5deg) scale(1.018);clip-path:polygon(50.00% 6.00%,53.70% 7.66%,56.86% 11.10%,59.84% 13.29%,63.51% 12.88%,67.96% 11.48%,72.00% 11.89%,74.38% 15.19%,75.39% 19.74%,76.87% 23.13%,80.26% 24.61%,84.81% 25.62%,88.11% 28.00%,88.52% 32.04%,87.12% 36.49%,86.71% 40.16%,88.90% 43.14%,92.34% 46.30%,94.00% 50.00%,92.34% 53.70%,88.90% 56.86%,86.71% 59.84%,87.12% 63.51%,88.52% 67.96%,88.11% 72.00%,84.81% 74.38%,80.26% 75.39%,76.87% 76.87%,75.39% 80.26%,74.38% 84.81%,72.00% 88.11%,67.96% 88.52%,63.51% 87.12%,59.84% 86.71%,56.86% 88.90%,53.70% 92.34%,50.00% 94.00%,46.30% 92.34%,43.14% 88.90%,40.16% 86.71%,36.49% 87.12%,32.04% 88.52%,28.00% 88.11%,25.62% 84.81%,24.61% 80.26%,23.13% 76.87%,19.74% 75.39%,15.19% 74.38%,11.89% 72.00%,11.48% 67.96%,12.88% 63.51%,13.29% 59.84%,11.10% 56.86%,7.66% 53.70%,6.00% 50.00%,7.66% 46.30%,11.10% 43.14%,13.29% 40.16%,12.88% 36.49%,11.48% 32.04%,11.89% 28.00%,15.19% 25.62%,19.74% 24.61%,23.13% 23.13%,24.61% 19.74%,25.62% 15.19%,28.00% 11.89%,32.04% 11.48%,36.49% 12.88%,40.16% 13.29%,43.14% 11.10%,46.30% 7.66%);border-radius:8%;}
 82% {opacity:1;transform:rotate(-1.5deg) scale(.996);clip-path:polygon(50.00% 3.00%,53.79% 6.67%,56.34% 14.05%,58.54% 18.12%,62.48% 15.70%,68.38% 10.58%,73.50% 9.30%,74.95% 14.37%,73.46% 22.04%,73.33% 26.67%,77.96% 26.54%,85.63% 25.05%,90.70% 26.50%,89.42% 31.62%,84.30% 37.52%,81.88% 41.46%,85.95% 43.66%,93.33% 46.21%,97.00% 50.00%,93.33% 53.79%,85.95% 56.34%,81.88% 58.54%,84.30% 62.48%,89.42% 68.38%,90.70% 73.50%,85.63% 74.95%,77.96% 73.46%,73.33% 73.33%,73.46% 77.96%,74.95% 85.63%,73.50% 90.70%,68.38% 89.42%,62.48% 84.30%,58.54% 81.88%,56.34% 85.95%,53.79% 93.33%,50.00% 97.00%,46.21% 93.33%,43.66% 85.95%,41.46% 81.88%,37.52% 84.30%,31.62% 89.42%,26.50% 90.70%,25.05% 85.63%,26.54% 77.96%,26.67% 73.33%,22.04% 73.46%,14.37% 74.95%,9.30% 73.50%,10.58% 68.38%,15.70% 62.48%,18.12% 58.54%,14.05% 56.34%,6.67% 53.79%,3.00% 50.00%,6.67% 46.21%,14.05% 43.66%,18.12% 41.46%,15.70% 37.52%,10.58% 31.62%,9.30% 26.50%,14.37% 25.05%,22.04% 26.54%,26.67% 26.67%,26.54% 22.04%,25.05% 14.37%,26.50% 9.30%,31.62% 10.58%,37.52% 15.70%,41.46% 18.12%,43.66% 14.05%,46.21% 6.67%);border-radius:0;}
 100% {opacity:1;transform:none;clip-path:polygon(50.00% 3.00%,53.79% 6.67%,56.34% 14.05%,58.54% 18.12%,62.48% 15.70%,68.38% 10.58%,73.50% 9.30%,74.95% 14.37%,73.46% 22.04%,73.33% 26.67%,77.96% 26.54%,85.63% 25.05%,90.70% 26.50%,89.42% 31.62%,84.30% 37.52%,81.88% 41.46%,85.95% 43.66%,93.33% 46.21%,97.00% 50.00%,93.33% 53.79%,85.95% 56.34%,81.88% 58.54%,84.30% 62.48%,89.42% 68.38%,90.70% 73.50%,85.63% 74.95%,77.96% 73.46%,73.33% 73.33%,73.46% 77.96%,74.95% 85.63%,73.50% 90.70%,68.38% 89.42%,62.48% 84.30%,58.54% 81.88%,56.34% 85.95%,53.79% 93.33%,50.00% 97.00%,46.21% 93.33%,43.66% 85.95%,41.46% 81.88%,37.52% 84.30%,31.62% 89.42%,26.50% 90.70%,25.05% 85.63%,26.54% 77.96%,26.67% 73.33%,22.04% 73.46%,14.37% 74.95%,9.30% 73.50%,10.58% 68.38%,15.70% 62.48%,18.12% 58.54%,14.05% 56.34%,6.67% 53.79%,3.00% 50.00%,6.67% 46.21%,14.05% 43.66%,18.12% 41.46%,15.70% 37.52%,10.58% 31.62%,9.30% 26.50%,14.37% 25.05%,22.04% 26.54%,26.67% 26.67%,26.54% 22.04%,25.05% 14.37%,26.50% 9.30%,31.62% 10.58%,37.52% 15.70%,41.46% 18.12%,43.66% 14.05%,46.21% 6.67%);border-radius:0;}
}
[data-theme] .prayertimes-wrapper[data-modern-style] .modern-message > .modern-corner-icon {
 padding:calc(1.4 * var(--modern-unit));
}
@media(min-aspect-ratio:1/1) {
 [data-theme] .prayertimes-wrapper[data-modern-style][data-modern-horizontal="true"] .modern-message > .modern-corner-icon {
  padding:calc(.9 * var(--modern-unit));
 }
}

[data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.modern-notifications-card .modern-corner-icon.modern-icon-flipping,.modern-message > .modern-corner-icon.modern-icon-flipping) { animation-duration:1000ms; }
@keyframes material-icon-container-star {
 0% {opacity:1;transform:rotate(-34deg) scale(.95);clip-path:polygon(50.00% 3.00%,54.10% 3.18%,58.16% 3.71%,62.16% 4.60%,66.07% 5.83%,69.86% 7.40%,73.50% 9.30%,76.96% 11.50%,80.21% 14.00%,83.23% 16.77%,86.00% 19.79%,88.50% 23.04%,90.70% 26.50%,92.60% 30.14%,94.17% 33.93%,95.40% 37.84%,96.29% 41.84%,96.82% 45.90%,97.00% 50.00%,96.82% 54.10%,96.29% 58.16%,95.40% 62.16%,94.17% 66.07%,92.60% 69.86%,90.70% 73.50%,88.50% 76.96%,86.00% 80.21%,83.23% 83.23%,80.21% 86.00%,76.96% 88.50%,73.50% 90.70%,69.86% 92.60%,66.07% 94.17%,62.16% 95.40%,58.16% 96.29%,54.10% 96.82%,50.00% 97.00%,45.90% 96.82%,41.84% 96.29%,37.84% 95.40%,33.93% 94.17%,30.14% 92.60%,26.50% 90.70%,23.04% 88.50%,19.79% 86.00%,16.77% 83.23%,14.00% 80.21%,11.50% 76.96%,9.30% 73.50%,7.40% 69.86%,5.83% 66.07%,4.60% 62.16%,3.71% 58.16%,3.18% 54.10%,3.00% 50.00%,3.18% 45.90%,3.71% 41.84%,4.60% 37.84%,5.83% 33.93%,7.40% 30.14%,9.30% 26.50%,11.50% 23.04%,14.00% 19.79%,16.77% 16.77%,19.79% 14.00%,23.04% 11.50%,26.50% 9.30%,30.14% 7.40%,33.93% 5.83%,37.84% 4.60%,41.84% 3.71%,45.90% 3.18%);border-radius:50%;}
 32% {opacity:1;transform:rotate(-16deg) scale(1);clip-path:polygon(50.00% 4.00%,53.98% 4.55%,57.74% 6.11%,61.14% 8.43%,64.13% 11.19%,66.78% 14.01%,69.27% 16.63%,71.80% 18.86%,74.58% 20.71%,77.70% 22.30%,81.13% 23.88%,84.69% 25.71%,88.11% 28.00%,91.03% 30.87%,93.17% 34.29%,94.30% 38.13%,94.38% 42.17%,93.52% 46.19%,92.00% 50.00%,90.16% 53.51%,88.34% 56.76%,86.84% 59.87%,85.77% 63.02%,85.10% 66.37%,84.64% 70.00%,84.12% 73.89%,83.22% 77.88%,81.70% 81.70%,79.41% 85.05%,76.38% 87.67%,72.73% 89.37%,68.72% 90.14%,64.60% 90.12%,60.60% 89.57%,56.85% 88.83%,53.34% 88.23%,50.00% 88.00%,46.66% 88.23%,43.15% 88.83%,39.40% 89.57%,35.40% 90.12%,31.28% 90.14%,27.27% 89.37%,23.62% 87.67%,20.59% 85.05%,18.30% 81.70%,16.78% 77.88%,15.88% 73.89%,15.36% 70.00%,14.90% 66.37%,14.23% 63.02%,13.16% 59.87%,11.66% 56.76%,9.84% 53.51%,8.00% 50.00%,6.48% 46.19%,5.62% 42.17%,5.70% 38.13%,6.83% 34.29%,8.97% 30.87%,11.89% 28.00%,15.31% 25.71%,18.87% 23.88%,22.30% 22.30%,25.42% 20.71%,28.20% 18.86%,30.73% 16.63%,33.22% 14.01%,35.87% 11.19%,38.86% 8.43%,42.26% 6.11%,46.02% 4.55%);border-radius:26%;}
 48% {opacity:1;transform:rotate(3deg) scale(1.018);clip-path:polygon(50.00% 6.00%,53.70% 7.66%,56.86% 11.10%,59.84% 13.29%,63.51% 12.88%,67.96% 11.48%,72.00% 11.89%,74.38% 15.19%,75.39% 19.74%,76.87% 23.13%,80.26% 24.61%,84.81% 25.62%,88.11% 28.00%,88.52% 32.04%,87.12% 36.49%,86.71% 40.16%,88.90% 43.14%,92.34% 46.30%,94.00% 50.00%,92.34% 53.70%,88.90% 56.86%,86.71% 59.84%,87.12% 63.51%,88.52% 67.96%,88.11% 72.00%,84.81% 74.38%,80.26% 75.39%,76.87% 76.87%,75.39% 80.26%,74.38% 84.81%,72.00% 88.11%,67.96% 88.52%,63.51% 87.12%,59.84% 86.71%,56.86% 88.90%,53.70% 92.34%,50.00% 94.00%,46.30% 92.34%,43.14% 88.90%,40.16% 86.71%,36.49% 87.12%,32.04% 88.52%,28.00% 88.11%,25.62% 84.81%,24.61% 80.26%,23.13% 76.87%,19.74% 75.39%,15.19% 74.38%,11.89% 72.00%,11.48% 67.96%,12.88% 63.51%,13.29% 59.84%,11.10% 56.86%,7.66% 53.70%,6.00% 50.00%,7.66% 46.30%,11.10% 43.14%,13.29% 40.16%,12.88% 36.49%,11.48% 32.04%,11.89% 28.00%,15.19% 25.62%,19.74% 24.61%,23.13% 23.13%,24.61% 19.74%,25.62% 15.19%,28.00% 11.89%,32.04% 11.48%,36.49% 12.88%,40.16% 13.29%,43.14% 11.10%,46.30% 7.66%);border-radius:8%;}
 60% {opacity:1;transform:rotate(-2deg) scale(1.025);clip-path:polygon(50.00% 3.00%,53.79% 6.67%,56.34% 14.05%,58.54% 18.12%,62.48% 15.70%,68.38% 10.58%,73.50% 9.30%,74.95% 14.37%,73.46% 22.04%,73.33% 26.67%,77.96% 26.54%,85.63% 25.05%,90.70% 26.50%,89.42% 31.62%,84.30% 37.52%,81.88% 41.46%,85.95% 43.66%,93.33% 46.21%,97.00% 50.00%,93.33% 53.79%,85.95% 56.34%,81.88% 58.54%,84.30% 62.48%,89.42% 68.38%,90.70% 73.50%,85.63% 74.95%,77.96% 73.46%,73.33% 73.33%,73.46% 77.96%,74.95% 85.63%,73.50% 90.70%,68.38% 89.42%,62.48% 84.30%,58.54% 81.88%,56.34% 85.95%,53.79% 93.33%,50.00% 97.00%,46.21% 93.33%,43.14% 88.90%,40.16% 86.71%,36.49% 87.12%,32.04% 88.52%,28.00% 88.11%,25.62% 84.81%,24.61% 80.26%,23.13% 76.87%,19.74% 75.39%,15.19% 74.38%,11.89% 72.00%,11.48% 67.96%,12.88% 63.51%,13.29% 59.84%,11.10% 56.86%,7.66% 53.70%,3.00% 50.00%,6.67% 46.21%,14.05% 43.66%,18.12% 41.46%,15.70% 37.52%,10.58% 31.62%,9.30% 26.50%,14.37% 25.05%,22.04% 26.54%,26.67% 26.67%,26.54% 22.04%,25.05% 14.37%,26.50% 9.30%,31.62% 10.58%,37.52% 15.70%,41.46% 18.12%,43.66% 14.05%,46.21% 6.67%);border-radius:0;}
 72% {opacity:1;transform:rotate(4deg) scale(1);clip-path:polygon(50.00% 6.00%,53.70% 7.66%,56.86% 11.10%,59.84% 13.29%,63.51% 12.88%,67.96% 11.48%,72.00% 11.89%,74.38% 15.19%,75.39% 19.74%,76.87% 23.13%,80.26% 24.61%,84.81% 25.62%,88.11% 28.00%,88.52% 32.04%,87.12% 36.49%,86.71% 40.16%,88.90% 43.14%,92.34% 46.30%,94.00% 50.00%,92.34% 53.70%,88.90% 56.86%,86.71% 59.84%,87.12% 63.51%,88.52% 67.96%,88.11% 72.00%,84.81% 74.38%,80.26% 75.39%,76.87% 76.87%,75.39% 80.26%,74.38% 84.81%,72.00% 88.11%,67.96% 88.52%,63.51% 87.12%,59.84% 86.71%,56.86% 88.90%,53.70% 92.34%,50.00% 94.00%,46.30% 92.34%,43.14% 88.90%,40.16% 86.71%,36.49% 87.12%,32.04% 88.52%,28.00% 88.11%,25.62% 84.81%,24.61% 80.26%,23.13% 76.87%,19.74% 75.39%,15.19% 74.38%,11.89% 72.00%,11.48% 67.96%,12.88% 63.51%,13.29% 59.84%,11.10% 56.86%,7.66% 53.70%,6.00% 50.00%,7.66% 46.30%,11.10% 43.14%,13.29% 40.16%,12.88% 36.49%,11.48% 32.04%,11.89% 28.00%,15.19% 25.62%,19.74% 24.61%,23.13% 23.13%,24.61% 19.74%,25.62% 15.19%,28.00% 11.89%,32.04% 11.48%,36.49% 12.88%,40.16% 13.29%,43.14% 11.10%,46.30% 7.66%);border-radius:8%;}
 86% {opacity:1;transform:rotate(2deg) scale(.99);clip-path:polygon(50.00% 4.00%,53.98% 4.55%,57.74% 6.11%,61.14% 8.43%,64.13% 11.19%,66.78% 14.01%,69.27% 16.63%,71.80% 18.86%,74.58% 20.71%,77.70% 22.30%,81.13% 23.88%,84.69% 25.71%,88.11% 28.00%,91.03% 30.87%,93.17% 34.29%,94.30% 38.13%,94.38% 42.17%,93.52% 46.19%,92.00% 50.00%,90.16% 53.51%,88.34% 56.76%,86.84% 59.87%,85.77% 63.02%,85.10% 66.37%,84.64% 70.00%,84.12% 73.89%,83.22% 77.88%,81.70% 81.70%,79.41% 85.05%,76.38% 87.67%,72.73% 89.37%,68.72% 90.14%,64.60% 90.12%,60.60% 89.57%,56.85% 88.83%,53.34% 88.23%,50.00% 88.00%,46.66% 88.23%,43.15% 88.83%,39.40% 89.57%,35.40% 90.12%,31.28% 90.14%,27.27% 89.37%,23.62% 87.67%,20.59% 85.05%,18.30% 81.70%,16.78% 77.88%,15.88% 73.89%,15.36% 70.00%,14.90% 66.37%,14.23% 63.02%,13.16% 59.87%,11.66% 56.76%,9.84% 53.51%,8.00% 50.00%,6.48% 46.19%,5.62% 42.17%,5.70% 38.13%,6.83% 34.29%,8.97% 30.87%,11.89% 28.00%,15.31% 25.71%,18.87% 23.88%,22.30% 22.30%,25.42% 20.71%,28.20% 18.86%,30.73% 16.63%,33.22% 14.01%,35.87% 11.19%,38.86% 8.43%,42.26% 6.11%,46.02% 4.55%);border-radius:26%;}
 100% {opacity:1;transform:none;clip-path:polygon(50.00% 3.00%,54.10% 3.18%,58.16% 3.71%,62.16% 4.60%,66.07% 5.83%,69.86% 7.40%,73.50% 9.30%,76.96% 11.50%,80.21% 14.00%,83.23% 16.77%,86.00% 19.79%,88.50% 23.04%,90.70% 26.50%,92.60% 30.14%,94.17% 33.93%,95.40% 37.84%,96.29% 41.84%,96.82% 45.90%,97.00% 50.00%,96.82% 54.10%,96.29% 58.16%,95.40% 62.16%,94.17% 66.07%,92.60% 69.86%,90.70% 73.50%,88.50% 76.96%,86.00% 80.21%,83.23% 83.23%,80.21% 86.00%,76.96% 88.50%,73.50% 90.70%,69.86% 92.60%,66.07% 94.17%,62.16% 95.40%,58.16% 96.29%,54.10% 96.82%,50.00% 97.00%,45.90% 96.82%,41.84% 96.29%,37.84% 95.40%,33.93% 94.17%,30.14% 92.60%,26.50% 90.70%,23.04% 88.50%,19.79% 86.00%,16.77% 83.23%,14.00% 80.21%,11.50% 76.96%,9.30% 73.50%,7.40% 69.86%,5.83% 66.07%,4.60% 62.16%,3.71% 58.16%,3.18% 54.10%,3.00% 50.00%,3.18% 45.90%,3.71% 41.84%,4.60% 37.84%,5.83% 33.93%,7.40% 30.14%,9.30% 26.50%,11.50% 23.04%,14.00% 19.79%,16.77% 16.77%,19.79% 14.00%,23.04% 11.50%,26.50% 9.30%,30.14% 7.40%,33.93% 5.83%,37.84% 4.60%,41.84% 3.71%,45.90% 3.18%);border-radius:50%;}
}
/* One continuous circle-to-star-to-circle morph: no secondary star shape. */
[data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.modern-notifications-card .modern-corner-icon.modern-icon-flipping,.modern-message > .modern-corner-icon.modern-icon-flipping) { animation-duration:1000ms; }
@keyframes material-icon-container-star {
 0%,100% {opacity:1;transform:rotate(-20deg) scale(.96);clip-path:polygon(50.00% 3.00%,56.13% 3.40%,62.16% 4.60%,67.99% 6.58%,73.50% 9.30%,78.61% 12.71%,83.23% 16.77%,87.29% 21.39%,90.70% 26.50%,93.42% 32.01%,95.40% 37.84%,96.60% 43.87%,97.00% 50.00%,96.60% 56.13%,95.40% 62.16%,93.42% 67.99%,90.70% 73.50%,87.29% 78.61%,83.23% 83.23%,78.61% 87.29%,73.50% 90.70%,67.99% 93.42%,62.16% 95.40%,56.13% 96.60%,50.00% 97.00%,43.87% 96.60%,37.84% 95.40%,32.01% 93.42%,26.50% 90.70%,21.39% 87.29%,16.77% 83.23%,12.71% 78.61%,9.30% 73.50%,6.58% 67.99%,4.60% 62.16%,3.40% 56.13%,3.00% 50.00%,3.40% 43.87%,4.60% 37.84%,6.58% 32.01%,9.30% 26.50%,12.71% 21.39%,16.77% 16.77%,21.39% 12.71%,26.50% 9.30%,32.01% 6.58%,37.84% 4.60%,43.87% 3.40%);border-radius:50%;}
 50% {opacity:1;transform:rotate(4deg) scale(1.025);clip-path:polygon(50.00% 0.50%,55.74% 6.38%,59.96% 12.81%,66.84% 9.35%,74.75% 7.13%,76.79% 15.09%,77.22% 22.78%,84.91% 23.21%,92.87% 25.25%,90.65% 33.16%,87.19% 40.04%,93.62% 44.26%,99.50% 50.00%,93.62% 55.74%,87.19% 59.96%,90.65% 66.84%,92.87% 74.75%,84.91% 76.79%,77.22% 77.22%,76.79% 84.91%,74.75% 92.87%,66.84% 90.65%,59.96% 87.19%,55.74% 93.62%,50.00% 99.50%,44.26% 93.62%,40.04% 87.19%,33.16% 90.65%,25.25% 92.87%,23.21% 84.91%,22.78% 77.22%,15.09% 76.79%,7.13% 74.75%,9.35% 66.84%,12.81% 59.96%,6.38% 55.74%,0.50% 50.00%,6.38% 44.26%,12.81% 40.04%,9.35% 33.16%,7.13% 25.25%,15.09% 23.21%,22.78% 22.78%,23.21% 15.09%,25.25% 7.13%,33.16% 9.35%,40.04% 12.81%,44.26% 6.38%);border-radius:10%;}
 100% {transform:none;}
}
/* Keep the softer Material star; remove the alternate multi-point star. */
@keyframes material-icon-container-star {
 0%,100% {opacity:1;transform:rotate(-20deg) scale(.96);clip-path:polygon(50.00% 3.00%,59.17% 3.90%,67.99% 6.58%,76.11% 10.92%,83.23% 16.77%,89.08% 23.89%,93.42% 32.01%,96.10% 40.83%,97.00% 50.00%,96.10% 59.17%,93.42% 67.99%,89.08% 76.11%,83.23% 83.23%,76.11% 89.08%,67.99% 93.42%,59.17% 96.10%,50.00% 97.00%,40.83% 96.10%,32.01% 93.42%,23.89% 89.08%,16.77% 83.23%,10.92% 76.11%,6.58% 67.99%,3.90% 59.17%,3.00% 50.00%,3.90% 40.83%,6.58% 32.01%,10.92% 23.89%,16.77% 16.77%,23.89% 10.92%,32.01% 6.58%,40.83% 3.90%);border-radius:50%;}
 50% {opacity:1;transform:rotate(4deg) scale(1.025);clip-path:polygon(50.00% 1.00%,58.39% 7.83%,64.16% 15.82%,73.89% 14.25%,84.65% 15.35%,85.75% 26.11%,84.18% 35.84%,92.17% 41.61%,99.00% 50.00%,92.17% 58.39%,84.18% 64.16%,85.75% 73.89%,84.65% 84.65%,73.89% 85.75%,64.16% 84.18%,58.39% 92.17%,50.00% 99.00%,41.61% 92.17%,35.84% 84.18%,26.11% 85.75%,15.35% 84.65%,14.25% 73.89%,15.82% 64.16%,7.83% 58.39%,1.00% 50.00%,7.83% 41.61%,15.82% 35.84%,14.25% 26.11%,15.35% 15.35%,26.11% 14.25%,35.84% 15.82%,41.61% 7.83%);border-radius:12%;}
 100% {transform:none;}
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.modern-notifications-card .modern-corner-icon.modern-icon-flipping,.modern-message > .modern-corner-icon.modern-icon-flipping) { animation-duration:1600ms; }
/* Smooth rounded Material star generated with eight samples per lobe. */
@keyframes material-icon-container-star {
 0%,100% {opacity:1;transform:rotate(-20deg) scale(.96);clip-path:polygon(50.00% 3.00%,54.61% 3.23%,59.17% 3.90%,63.64% 5.02%,67.99% 6.58%,72.16% 8.55%,76.11% 10.92%,79.82% 13.67%,83.23% 16.77%,86.33% 20.18%,89.08% 23.89%,91.45% 27.84%,93.42% 32.01%,94.98% 36.36%,96.10% 40.83%,96.77% 45.39%,97.00% 50.00%,96.77% 54.61%,96.10% 59.17%,94.98% 63.64%,93.42% 67.99%,91.45% 72.16%,89.08% 76.11%,86.33% 79.82%,83.23% 83.23%,79.82% 86.33%,76.11% 89.08%,72.16% 91.45%,67.99% 93.42%,63.64% 94.98%,59.17% 96.10%,54.61% 96.77%,50.00% 97.00%,45.39% 96.77%,40.83% 96.10%,36.36% 94.98%,32.01% 93.42%,27.84% 91.45%,23.89% 89.08%,20.18% 86.33%,16.77% 83.23%,13.67% 79.82%,10.92% 76.11%,8.55% 72.16%,6.58% 67.99%,5.02% 63.64%,3.90% 59.17%,3.23% 54.61%,3.00% 50.00%,3.23% 45.39%,3.90% 40.83%,5.02% 36.36%,6.58% 32.01%,8.55% 27.84%,10.92% 23.89%,13.67% 20.18%,16.77% 16.77%,20.18% 13.67%,23.89% 10.92%,27.84% 8.55%,32.01% 6.58%,36.36% 5.02%,40.83% 3.90%,45.39% 3.23%);border-radius:50%;}
 50% {opacity:1;transform:rotate(4deg) scale(1.025);clip-path:polygon(50.00% 1.50%,54.61% 3.19%,58.49% 7.34%,61.60% 11.76%,64.73% 14.43%,68.84% 14.75%,74.17% 13.83%,79.84% 13.64%,84.29% 15.71%,86.36% 20.16%,86.17% 25.83%,85.25% 31.16%,85.57% 35.27%,88.24% 38.40%,92.66% 41.51%,96.81% 45.39%,98.50% 50.00%,96.81% 54.61%,92.66% 58.49%,88.24% 61.60%,85.57% 64.73%,85.25% 68.84%,86.17% 74.17%,86.36% 79.84%,84.29% 84.29%,79.84% 86.36%,74.17% 86.17%,68.84% 85.25%,64.73% 85.57%,61.60% 88.24%,58.49% 92.66%,54.61% 96.81%,50.00% 98.50%,45.39% 96.81%,41.51% 92.66%,38.40% 88.24%,35.27% 85.57%,31.16% 85.25%,25.83% 86.17%,20.16% 86.36%,15.71% 84.29%,13.64% 79.84%,13.83% 74.17%,14.75% 68.84%,14.43% 64.73%,11.76% 61.60%,7.34% 58.49%,3.19% 54.61%,1.50% 50.00%,3.19% 45.39%,7.34% 41.51%,11.76% 38.40%,14.43% 35.27%,14.75% 31.16%,13.83% 25.83%,13.64% 20.16%,15.71% 15.71%,20.16% 13.64%,25.83% 13.83%,31.16% 14.75%,35.27% 14.43%,38.40% 11.76%,41.51% 7.34%,45.39% 3.19%);border-radius:16%;}
 100% {transform:none;}
}
/* Rotate the transforming container while keeping its pictogram upright. */
[data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.modern-notifications-card .modern-corner-icon.modern-icon-flipping,.modern-message > .modern-corner-icon.modern-icon-flipping) {
 animation-name:material-icon-container-star,material-icon-container-rotation;
 animation-duration:1600ms,1600ms;
 animation-timing-function:cubic-bezier(.4,0,.2,1),cubic-bezier(.4,0,.2,1);
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.modern-notifications-card .modern-corner-icon.modern-icon-flipping,.modern-message > .modern-corner-icon.modern-icon-flipping) > svg {
 animation:material-icon-pictogram-counter-rotation 1600ms cubic-bezier(.4,0,.2,1) both;
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] :is(.modern-notifications-card .modern-corner-icon.modern-icon-flipping,.modern-message > .modern-corner-icon.modern-icon-flipping) > .modern-corner-icon__art {
 animation:material-icon-pictogram-counter-rotation 1600ms cubic-bezier(.4,0,.2,1) both;
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] .modern-notifications-card .modern-corner-icon.modern-icon-flipping > .modern-corner-icon__art {
 animation:material-icon-pictogram-counter-rotation 1600ms cubic-bezier(.4,0,.2,1) both;
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] .modern-notifications-card .modern-corner-icon.modern-icon-flipping > .modern-corner-icon__art svg {
 animation:material-speaker-rock 1600ms linear both;
 transform-origin:36% 68%;
}
@keyframes material-icon-container-rotation {
 0% {rotate:0deg;scale:1;}
 50% {rotate:90deg;scale:1;}
 100% {rotate:180deg;scale:1;}
}
@keyframes material-icon-pictogram-counter-rotation {
 0% {rotate:0deg;}
 50% {rotate:-90deg;}
 100% {rotate:-180deg;}
}
@keyframes material-speaker-rock {
 0% {rotate:0deg;}
 18% {rotate:-10deg;}
 36% {rotate:6deg;}
 52% {rotate:-3.5deg;}
 66% {rotate:1.8deg;}
 80% {rotate:-.7deg;}
 100% {rotate:0deg;}
}
/* Smart notification badge matches the Hadith badge without inheriting its motion. */
[data-theme] .prayertimes-wrapper[data-modern-style="4"] .modern-campaign-card .campaign-notification__icon {
 width:calc(8 * var(--modern-unit));
 height:calc(8 * var(--modern-unit));
 padding:calc(1.4 * var(--modern-unit));
 box-sizing:border-box;
 border-radius:50%;
 clip-path:circle(47% at 50% 50%);
 background:var(--md-icon-container);
 color:var(--md-icon-ink);
 border:0;
 box-shadow:none;
 display:flex;
 align-items:center;
 justify-content:center;
}
[data-theme] .prayertimes-wrapper[data-modern-style="4"] .modern-campaign-card .campaign-notification__icon > svg {
 width:72%;height:72%;display:block;
}
@media (min-aspect-ratio:1/1) {
 [data-theme] .prayertimes-wrapper[data-modern-style="4"][data-modern-horizontal="true"] .modern-campaign-card .campaign-notification__icon {
  width:calc(5 * var(--modern-unit));
  height:calc(5 * var(--modern-unit));
  padding:calc(.9 * var(--modern-unit));
 }
}
/* Give Hadith text a balanced reading edge opposite its icon in both directions. */
.prayertimes-wrapper[data-modern-style] .modern-message {
 padding-inline-end:calc(6 * var(--modern-unit));
}
@media (min-aspect-ratio:1/1) {
 .prayertimes-wrapper[data-modern-style][data-modern-horizontal="true"] .modern-message {
  padding-inline-end:calc(3.5 * var(--modern-unit));
 }
}
/* Style 4 countdown keeps its content away from both side edges. */
[data-theme] .prayertimes-wrapper[data-modern-style="4"] > .mwaqeet > .modern-countdown-card {
 padding-inline:calc(4.5 * var(--modern-unit));
}
@media (min-aspect-ratio:1/1) {
 [data-theme] .prayertimes-wrapper[data-modern-style="4"][data-modern-horizontal="true"] > .mwaqeet > .modern-countdown-card {
  padding-inline:calc(2 * var(--modern-unit));
 }
}
/* Style 9 keeps its ornament on the page plane; reading cards stay clean. */

/* Style 7 card refinement: quieter portal-derived edges, coherent surfaces and TV-safe depth. */
[data-theme] .prayertimes-wrapper[data-modern-style="7"] {
 --style7-card-surface:color-mix(in srgb,var(--color-ui) 97%,var(--color-background));
 --style7-card-edge:color-mix(in srgb,var(--color-border) 48%,transparent);
 --style7-card-highlight:color-mix(in srgb,var(--color-ui) 78%,white);
 --style7-card-shadow:0 calc(.28 * var(--modern-unit)) calc(.8 * var(--modern-unit)) color-mix(in srgb,var(--color-text) 8%,transparent),0 calc(1.8 * var(--modern-unit)) calc(5.4 * var(--modern-unit)) calc(-2.2 * var(--modern-unit)) color-mix(in srgb,var(--color-text) 24%,transparent);
 --style7-card-shadow-quiet:0 calc(.18 * var(--modern-unit)) calc(.6 * var(--modern-unit)) color-mix(in srgb,var(--color-text) 7%,transparent),0 calc(1.1 * var(--modern-unit)) calc(3.6 * var(--modern-unit)) calc(-2 * var(--modern-unit)) color-mix(in srgb,var(--color-text) 18%,transparent);
}
[data-theme="dark"] .prayertimes-wrapper[data-modern-style="7"] {
 --style7-card-surface:color-mix(in srgb,var(--color-ui) 94%,var(--color-background));
 --style7-card-edge:color-mix(in srgb,var(--color-border) 58%,transparent);
 --style7-card-highlight:color-mix(in srgb,var(--color-text) 12%,transparent);
}
[data-theme] .prayertimes-wrapper[data-modern-style="7"] :is(.mwaqeet,.modern-header,.modern-message,.modern-notifications-card,.modern-campaign-card,.splash.modern-post-prayer-splash) {
 background-color:var(--style7-card-surface);
 border-width:max(1px,calc(.09 * var(--modern-unit)));
 border-color:var(--style7-card-edge);
 box-shadow:inset 0 1px 0 var(--style7-card-highlight),var(--style7-card-shadow-quiet);
}
[data-theme] .prayertimes-wrapper[data-modern-style="7"] .prayer.prayer--active {
 border-width:max(1px,calc(.09 * var(--modern-unit)));
 border-color:var(--style7-card-edge);
}
[data-theme] .prayertimes-wrapper[data-modern-style="7"] > .mwaqeet {
 box-shadow:inset 0 1px 0 var(--style7-card-highlight),var(--style7-card-shadow);
}
[data-theme] .prayertimes-wrapper[data-modern-style="7"] .modern-header {
 box-shadow:inset 0 1px 0 var(--style7-card-highlight),var(--style7-card-shadow-quiet);
}
[data-theme] .prayertimes-wrapper[data-modern-style="7"] :is(.modern-message,.modern-notifications-card) {
 padding-block:calc(3.2 * var(--modern-unit));
 padding-inline:calc(4.5 * var(--modern-unit));
}
[data-theme] .prayertimes-wrapper[data-modern-style="7"] :is(.modern-message > .modern-corner-icon,.modern-notifications-card .modern-corner-icon) {
 top:calc(2.2 * var(--modern-unit));
 inset-inline-start:auto;
 inset-inline-end:calc(2.2 * var(--modern-unit));
 width:calc(8.2 * var(--modern-unit));
 height:calc(8.2 * var(--modern-unit));
 padding:calc(1.45 * var(--modern-unit));
 color:var(--color-darker_text);
 background:color-mix(in srgb,var(--color-darker_text) 11%,transparent);
 border:1px solid color-mix(in srgb,var(--color-darker_text) 18%,transparent);
 box-shadow:inset 0 1px 0 color-mix(in srgb,var(--color-ui) 76%,white);
}
[data-theme] .prayertimes-wrapper[data-modern-style="7"] .modern-campaign-card .campaign-notification__icon {
 display:grid;
 place-items:center;
 flex:0 0 calc(8.2 * var(--modern-unit));
 width:calc(8.2 * var(--modern-unit));
 height:calc(8.2 * var(--modern-unit));
 padding:calc(1.45 * var(--modern-unit));
 box-sizing:border-box;
 border-radius:calc(2 * var(--modern-unit));
 color:var(--color-darker_text);
 background:color-mix(in srgb,var(--color-darker_text) 11%,transparent);
 border:1px solid color-mix(in srgb,var(--color-darker_text) 18%,transparent);
 box-shadow:inset 0 1px 0 color-mix(in srgb,var(--color-ui) 76%,white);
}
[data-theme] .prayertimes-wrapper[data-modern-style="7"] .modern-campaign-card .campaign-notification__icon > svg {
 width:88%;
 height:88%;
}
[data-theme] .prayertimes-wrapper[data-modern-style="7"] .modern-message > :is(.sanad,.content,.source) {
 padding-inline-start:0;
 padding-inline-end:calc(6.5 * var(--modern-unit));
}
[data-theme] .prayertimes-wrapper[data-modern-style="7"] .modern-notifications-card .notification__content {
 padding-inline:calc(5.2 * var(--modern-unit));
}
[data-theme] .prayertimes-wrapper[data-modern-style="7"] .modern-notifications-card .notification__icon {
 display:none;
}
[data-theme] .prayertimes-wrapper[data-modern-style="7"] .modern-notifications-card .notification__qr-details {
 inset-inline-start:calc(5.2 * var(--modern-unit));
 max-width:calc(100% - 10.4 * var(--modern-unit));
}
[data-theme] .prayertimes-wrapper[data-modern-style="7"] .modern-campaign-card {
 padding-inline:calc(2.8 * var(--modern-unit));
}

/* Style 7 content arrives in a restrained sequence while its surface remains visually stable. */
.prayertimes-wrapper[data-modern-style="7"] .modern-content-stage > .modern-card-slide-enter-active {
 transition-duration:620ms;
 transition-timing-function:cubic-bezier(.2,.72,.2,1);
}
.prayertimes-wrapper[data-modern-style="7"] .modern-content-stage > .modern-card-slide-leave-active {
 transition-duration:340ms;
 transition-timing-function:cubic-bezier(.4,0,1,1);
}
.prayertimes-wrapper[data-modern-style="7"] .modern-content-stage > .modern-card-slide-enter-from {
 transform:translateY(calc(2.5 * var(--modern-unit))) scale(.992);
}
.prayertimes-wrapper[data-modern-style="7"] .modern-card-slide-enter-active :is(.modern-corner-icon,.sanad,.content,.source,.notification__copy,.notification__qr-details,.notification__bullets) {
 transition:opacity 460ms cubic-bezier(.2,.72,.2,1),transform 560ms cubic-bezier(.2,.72,.2,1);
}
.prayertimes-wrapper[data-modern-style="7"] .modern-card-slide-enter-from :is(.modern-corner-icon,.sanad,.content,.source,.notification__copy,.notification__qr-details,.notification__bullets) {
 opacity:0;
 transform:translateY(calc(1.2 * var(--modern-unit)));
}
.prayertimes-wrapper[data-modern-style="7"] .modern-card-slide-enter-active :is(.modern-corner-icon,.sanad,.notification__copy) { transition-delay:80ms; }
.prayertimes-wrapper[data-modern-style="7"] .modern-card-slide-enter-active :is(.content,.source) { transition-delay:150ms; }
.prayertimes-wrapper[data-modern-style="7"] .modern-card-slide-enter-active .notification__qr-details { transition-delay:220ms; }
.prayertimes-wrapper[data-modern-style="7"] .modern-card-slide-enter-active .notification__bullets { transition-delay:280ms; }
@media(prefers-reduced-motion:reduce) {
 .prayertimes-wrapper[data-modern-style="7"] .modern-content-stage > :is(.modern-card-slide-enter-active,.modern-card-slide-leave-active),
 .prayertimes-wrapper[data-modern-style="7"] .modern-card-slide-enter-active :is(.modern-corner-icon,.sanad,.content,.source,.notification__copy,.notification__qr-details,.notification__bullets) { transition:none; }
 .prayertimes-wrapper[data-modern-style="7"] .modern-content-stage > .modern-card-slide-enter-from,
 .prayertimes-wrapper[data-modern-style="7"] .modern-card-slide-enter-from :is(.modern-corner-icon,.sanad,.content,.source,.notification__copy,.notification__qr-details,.notification__bullets) { transform:none;opacity:1; }
}