@property --horizon-day-weight {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --horizon-night-weight {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --horizon-night-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  color-scheme: dark;
  --navy-950: #04101f;
  --navy-900: #07172b;
  --navy-800: #0b213a;
  --navy-700: #12304f;
  --gold: #d8b765;
  --gold-bright: #f0d98b;
  --cream: #f4ead5;
  --muted: #afbdd0;
  --line: rgba(216, 183, 101, 0.2);
  --card: rgba(9, 29, 51, 0.78);
  --shadow: 0 28px 70px rgba(0, 0, 0, 0.38);
  --page-glow: rgba(20, 58, 88, 0.62);
  --page-top: #091c31;
  --page-bottom: #04101f;
  --page-detail: rgba(255,255,255,.018);
  --ambient-primary: #d8b765;
  --ambient-secondary: #315e8c;
  --title-mid: #f7e8bf;
  --next-border: rgba(240,217,139,.42);
  --next-start: rgba(216,183,101,.18);
  --next-end: rgba(9,29,51,.88);
  --row-bg: rgba(5,20,37,.5);
  --selected-start: rgba(216,183,101,.16);
  --selected-end: rgba(7,23,43,.76);
  --settings-bg: #0a2038;
  --input-bg: rgba(4,16,31,.48);
  --input-border: rgba(216,183,101,.16);
  --input-placeholder: #8796aa;
  --option-bg: rgba(4,16,31,.35);
  --button-bg: rgba(4,16,31,.3);
  --toast-bg: rgba(4,16,31,.94);
  --toast-text: var(--cream);
  --clock-border: rgba(244,234,213,.72);
  --button-border: color-mix(in srgb, var(--gold) 32%, transparent);
  --accent-divider: color-mix(in srgb, var(--gold) 16%, transparent);
  --card-border: color-mix(in srgb, var(--gold) 16%, transparent);
  --selected-border: color-mix(in srgb, var(--gold-bright) 65%, transparent);
  --choice-border: color-mix(in srgb, var(--gold-bright) 72%, transparent);
  --accent-wash: color-mix(in srgb, var(--gold) 11%, transparent);
  --accent-halo: color-mix(in srgb, var(--gold-bright) 12%, transparent);
}

/* Keep native mobile tap feedback from flashing a browser-coloured overlay. */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }

:root[data-theme="desert"] {
  --navy-950: #160e09; --navy-900: #24170f; --navy-800: #352216; --navy-700: #563b27;
  --gold: #c79a61; --gold-bright: #ebcc92; --cream: #f7ead6; --muted: #cfbaa1;
  --line: rgba(199,154,97,.27); --card: rgba(47,30,20,.8);
  --page-glow: rgba(110,71,38,.48); --page-top: #392519; --page-bottom: #160e09; --page-detail: rgba(255,238,210,.018);
  --ambient-primary: #bd8950; --ambient-secondary: #6c4430; --title-mid: #efd7ad;
  --next-border: rgba(235,204,146,.48); --next-start: rgba(176,123,70,.24); --next-end: rgba(52,32,20,.9);
  --row-bg: rgba(34,21,14,.64); --selected-start: rgba(190,139,79,.22); --selected-end: rgba(47,29,19,.82);
  --settings-bg: #302014; --input-bg: rgba(21,12,8,.5); --input-border: rgba(199,154,97,.2); --input-placeholder: #aa927a; --option-bg: rgba(24,14,9,.42); --button-bg: rgba(21,12,8,.34); --toast-bg: rgba(21,12,8,.96);
  --clock-border: rgba(247,234,214,.7);
}

:root[data-theme="cream"] {
  color-scheme: light;
  --navy-950: #f4ead7; --navy-900: #ead7b8; --navy-800: #dac39d; --navy-700: #c7a87a;
  --gold: #a87848; --gold-bright: #865d38; --cream: #402d20; --muted: #765b44;
  --line: rgba(128,87,48,.25); --card: rgba(245,231,204,.82);
  --page-glow: rgba(202,166,111,.38); --page-top: #f6ead5; --page-bottom: #ddc39a; --page-detail: rgba(82,54,33,.04);
  --ambient-primary: #bf915b; --ambient-secondary: #caa874; --title-mid: #6f4c2f;
  --next-border: rgba(141,98,56,.42); --next-start: rgba(177,132,77,.25); --next-end: rgba(249,238,217,.88);
  --row-bg: rgba(251,240,220,.66); --selected-start: rgba(180,133,75,.24); --selected-end: rgba(244,223,188,.86);
  --settings-bg: #ead2aa; --input-bg: rgba(255,248,234,.76); --input-border: rgba(134,93,56,.2); --input-placeholder: #967b62; --option-bg: rgba(255,248,234,.6); --button-bg: rgba(255,248,234,.46); --toast-bg: #402d20; --toast-text: #f8eedb;
  --clock-border: rgba(64,45,32,.65);
  --shadow: 0 18px 48px rgba(102,72,41,.17);
}

:root[data-theme="horizon"] {
  color-scheme: light;
  transition: --horizon-day-weight 62s linear, --horizon-night-weight 62s linear, --horizon-night-opacity 62s linear;
  --navy-950: color-mix(in srgb, #f4ead7 var(--horizon-day-weight), #160e09 var(--horizon-night-weight));
  --navy-900: color-mix(in srgb, #ead7b8 var(--horizon-day-weight), #24170f var(--horizon-night-weight));
  --navy-800: color-mix(in srgb, #dac39d var(--horizon-day-weight), #352216 var(--horizon-night-weight));
  --navy-700: color-mix(in srgb, #c7a87a var(--horizon-day-weight), #563b27 var(--horizon-night-weight));
  --gold: color-mix(in srgb, #a87848 var(--horizon-day-weight), #c79a61 var(--horizon-night-weight));
  --gold-bright: color-mix(in srgb, #865d38 var(--horizon-day-weight), #ebcc92 var(--horizon-night-weight));
  --cream: color-mix(in srgb, #402d20 var(--horizon-day-weight), #f7ead6 var(--horizon-night-weight));
  --muted: color-mix(in srgb, #765b44 var(--horizon-day-weight), #cfbaa1 var(--horizon-night-weight));
  --line: color-mix(in srgb, rgba(128,87,48,.25) var(--horizon-day-weight), rgba(199,154,97,.27) var(--horizon-night-weight));
  --card: color-mix(in srgb, rgba(245,231,204,.82) var(--horizon-day-weight), rgba(47,30,20,.8) var(--horizon-night-weight));
  --page-glow: color-mix(in srgb, rgba(202,166,111,.38) var(--horizon-day-weight), rgba(110,71,38,.48) var(--horizon-night-weight));
  --page-top: color-mix(in srgb, #f6ead5 var(--horizon-day-weight), #392519 var(--horizon-night-weight));
  --page-bottom: color-mix(in srgb, #ddc39a var(--horizon-day-weight), #160e09 var(--horizon-night-weight));
  --page-detail: color-mix(in srgb, rgba(82,54,33,.04) var(--horizon-day-weight), rgba(255,238,210,.018) var(--horizon-night-weight));
  --ambient-primary: color-mix(in srgb, #bf915b var(--horizon-day-weight), #bd8950 var(--horizon-night-weight));
  --ambient-secondary: color-mix(in srgb, #caa874 var(--horizon-day-weight), #6c4430 var(--horizon-night-weight));
  --title-mid: color-mix(in srgb, #6f4c2f var(--horizon-day-weight), #efd7ad var(--horizon-night-weight));
  --next-border: color-mix(in srgb, rgba(141,98,56,.42) var(--horizon-day-weight), rgba(235,204,146,.48) var(--horizon-night-weight));
  --next-start: color-mix(in srgb, rgba(177,132,77,.25) var(--horizon-day-weight), rgba(176,123,70,.24) var(--horizon-night-weight));
  --next-end: color-mix(in srgb, rgba(249,238,217,.88) var(--horizon-day-weight), rgba(52,32,20,.9) var(--horizon-night-weight));
  --row-bg: color-mix(in srgb, rgba(251,240,220,.66) var(--horizon-day-weight), rgba(34,21,14,.64) var(--horizon-night-weight));
  --selected-start: color-mix(in srgb, rgba(180,133,75,.24) var(--horizon-day-weight), rgba(190,139,79,.22) var(--horizon-night-weight));
  --selected-end: color-mix(in srgb, rgba(244,223,188,.86) var(--horizon-day-weight), rgba(47,29,19,.82) var(--horizon-night-weight));
  --settings-bg: color-mix(in srgb, #ead2aa var(--horizon-day-weight), #302014 var(--horizon-night-weight));
  --input-bg: color-mix(in srgb, rgba(255,248,234,.76) var(--horizon-day-weight), rgba(21,12,8,.5) var(--horizon-night-weight));
  --input-border: color-mix(in srgb, rgba(134,93,56,.2) var(--horizon-day-weight), rgba(199,154,97,.2) var(--horizon-night-weight));
  --input-placeholder: color-mix(in srgb, #967b62 var(--horizon-day-weight), #aa927a var(--horizon-night-weight));
  --option-bg: color-mix(in srgb, rgba(255,248,234,.6) var(--horizon-day-weight), rgba(24,14,9,.42) var(--horizon-night-weight));
  --button-bg: color-mix(in srgb, rgba(255,248,234,.46) var(--horizon-day-weight), rgba(21,12,8,.34) var(--horizon-night-weight));
  --toast-bg: color-mix(in srgb, #402d20 var(--horizon-day-weight), rgba(21,12,8,.96) var(--horizon-night-weight));
  --toast-text: color-mix(in srgb, #f8eedb var(--horizon-day-weight), #f7ead6 var(--horizon-night-weight));
  --clock-border: color-mix(in srgb, rgba(64,45,32,.65) var(--horizon-day-weight), rgba(247,234,214,.7) var(--horizon-night-weight));
  --shadow: 0 20px 54px color-mix(in srgb, rgba(102,72,41,.17) var(--horizon-day-weight), rgba(0,0,0,.38) var(--horizon-night-weight));
}

:root.theme-snap,
:root.theme-snap .brand-mark,
:root.theme-snap .theme-icon {
  transition: none !important;
}

:root[data-theme="emerald"] {
  --navy-950: #05251f; --navy-900: #07352c; --navy-800: #0b493c; --navy-700: #156655;
  --gold: #c5a35d; --gold-bright: #e6cf91; --cream: #f4ecd9; --muted: #b6ccbd;
  --line: rgba(197,163,93,.26); --card: rgba(5,47,39,.8);
  --page-glow: rgba(16,94,73,.5); --page-top: #083a30; --page-bottom: #05251f; --page-detail: rgba(232,255,240,.018);
  --ambient-primary: #c5a35d; --ambient-secondary: #197560; --title-mid: #e5d5aa;
  --next-border: rgba(230,207,145,.44); --next-start: rgba(147,115,57,.2); --next-end: rgba(5,55,44,.9);
  --row-bg: rgba(3,42,35,.62); --selected-start: rgba(169,139,69,.2); --selected-end: rgba(5,52,42,.82);
  --settings-bg: #083b31; --input-bg: rgba(2,31,26,.52); --input-border: rgba(197,163,93,.18); --input-placeholder: #8eaa9a; --option-bg: rgba(2,31,26,.4); --button-bg: rgba(2,31,26,.32); --toast-bg: rgba(2,31,26,.96);
  --clock-border: rgba(244,236,217,.72);
}

:root[data-theme="teal"] {
  --navy-950: #04242e; --navy-900: #06343f; --navy-800: #0b4b57; --navy-700: #176875;
  --gold: #bf9655; --gold-bright: #e4c983; --cream: #f2ead9; --muted: #b8ced0;
  --line: rgba(191,150,85,.26); --card: rgba(4,46,57,.8);
  --page-glow: rgba(18,94,108,.5); --page-top: #073c49; --page-bottom: #04242e; --page-detail: rgba(230,255,255,.018);
  --ambient-primary: #bf9655; --ambient-secondary: #1a7480; --title-mid: #e4d3aa;
  --next-border: rgba(228,201,131,.44); --next-start: rgba(157,111,52,.21); --next-end: rgba(4,53,64,.9);
  --row-bg: rgba(3,39,49,.62); --selected-start: rgba(162,117,58,.2); --selected-end: rgba(4,51,62,.82);
  --settings-bg: #063d49; --input-bg: rgba(2,30,38,.52); --input-border: rgba(191,150,85,.18); --input-placeholder: #89a9ae; --option-bg: rgba(2,30,38,.4); --button-bg: rgba(2,30,38,.32); --toast-bg: rgba(2,30,38,.96);
  --clock-border: rgba(242,234,217,.72);
}

:root[data-theme="mihrab"] {
  --navy-950: #190d27; --navy-900: #28133a; --navy-800: #3c1e55; --navy-700: #5d347a;
  --gold: #c6a261; --gold-bright: #e8d19a; --cream: #f5ebdf; --muted: #cebdd4;
  --line: rgba(198,162,97,.27); --card: rgba(38,17,56,.81);
  --page-glow: rgba(102,48,128,.47); --page-top: #32194a; --page-bottom: #190d27; --page-detail: rgba(255,236,255,.019);
  --ambient-primary: #c6a261; --ambient-secondary: #7c438f; --title-mid: #e4cbb1;
  --next-border: rgba(232,209,154,.45); --next-start: rgba(153,108,63,.22); --next-end: rgba(47,21,66,.9);
  --row-bg: rgba(29,12,44,.64); --selected-start: rgba(172,128,69,.21); --selected-end: rgba(43,19,61,.83);
  --settings-bg: #32184a; --input-bg: rgba(21,8,33,.54); --input-border: rgba(198,162,97,.19); --input-placeholder: #aa98b4; --option-bg: rgba(21,8,33,.42); --button-bg: rgba(21,8,33,.34); --toast-bg: rgba(21,8,33,.96);
  --clock-border: rgba(245,235,223,.72);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--navy-950); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  color: var(--cream);
  background:
    radial-gradient(circle at 50% -10%, var(--page-glow), transparent 38rem),
    linear-gradient(180deg, var(--page-top) 0%, var(--navy-900) 42%, var(--page-bottom) 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.24;
  background-image: repeating-linear-gradient(115deg, transparent 0 42px, var(--page-detail) 43px 44px);
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.ambient {
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  opacity: 0.16;
}
.ambient-one { width: 18rem; height: 18rem; background: var(--ambient-primary); left: -10rem; top: 25%; }
.ambient-two { width: 22rem; height: 22rem; background: var(--ambient-secondary); right: -14rem; top: 58%; }

.app-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 32rem);
  margin: 0 auto;
  padding: max(.55rem, env(safe-area-inset-top)) 1rem calc(2rem + env(safe-area-inset-bottom));
}

.hero { padding: 0 0 .58rem; text-align: center; }
.eyebrow, .section-kicker {
  margin: 0 0 .5rem;
  color: var(--gold);
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.brand-lockup {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .46rem;
  width: 100%;
  min-width: 0;
}
.brand-source-button { display: block; flex: 0 0 auto; margin: 0; padding: 0; border: 0; border-radius: .45rem; color: inherit; background: transparent; line-height: 0; cursor: pointer; }
.brand-source-button:hover { filter: drop-shadow(0 0 .45rem color-mix(in srgb, var(--gold-bright) 34%, transparent)); }
.brand-mark-stack {
  display: grid;
  flex: 0 0 auto;
  width: clamp(2.85rem, 12.5vw, 3.9rem);
}
.brand-mark {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
}
.brand-mark-night { opacity: 1; }
.brand-mark-day { opacity: 0; }
:root[data-theme="cream"] .brand-mark-night { opacity: 0; }
:root[data-theme="cream"] .brand-mark-day { opacity: 1; }
:root[data-theme="horizon"] .brand-mark-night { opacity: var(--horizon-night-opacity); }
:root[data-theme="horizon"] .brand-mark-day { opacity: calc(1 - var(--horizon-night-opacity)); }
:root[data-theme="horizon"] .brand-mark { transition: opacity 62s linear; }
.hero h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 10.6vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.025em;
  white-space: nowrap;
  transform: translateY(.13em);
  background: linear-gradient(100deg, var(--cream) 4%, var(--title-mid) 45%, var(--gold-bright) 72%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.date-navigation { position: relative; display: grid; grid-template-columns: 2.55rem 1fr 2.55rem; align-items: center; gap: .35rem; margin: .64rem auto 0; max-width: 25rem; }
.date-arrow, .date-display { border: 0; color: inherit; background: transparent; cursor: pointer; }
.date-arrow { height: 2.55rem; border-radius: 50%; color: var(--gold-bright); font-size: 2.1rem; line-height: 1; }
.date-arrow:hover, .date-arrow:focus-visible { background: rgba(255,255,255,.06); }
.date-display { padding: .2rem; border-radius: .7rem; }
.date-display strong, .date-display span { display: block; }
.date-display strong { font-size: .98rem; font-weight: 650; letter-spacing: .01em; }
.date-display span { margin-top: .28rem; color: var(--muted); font-family: Georgia, serif; font-size: .83rem; }
.date-picker { position: absolute; z-index: 2; top: 0; bottom: 0; left: 2.9rem; width: calc(100% - 5.8rem); margin: 0; opacity: 0; cursor: pointer; }

.next-prayer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 6.25rem;
  margin-bottom: 1rem;
  padding: 1.2rem 1.25rem;
  overflow: hidden;
  border: 1px solid var(--next-border);
  border-radius: 1.25rem;
  background: linear-gradient(125deg, var(--next-start), var(--next-end) 57%);
  box-shadow: 0 18px 45px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.08);
}
.next-prayer::before,
.prayer-row::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image: url("islamic-geometric-pattern.png");
  background-repeat: repeat;
  opacity: .14;
}
.next-prayer::before {
  background-size: 270px 270px;
  background-position: 62% 48%;
  opacity: .18;
}
.next-prayer > div { position: relative; z-index: 1; }
.next-label, .countdown-wrap span { display: block; color: var(--muted); font-size: .63rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.next-prayer strong { display: block; }
#nextPrayerName { margin: .2rem 0 .05rem; color: var(--gold-bright); font-family: Georgia, serif; font-size: 1.55rem; font-weight: 400; }
#nextPrayerTime { color: var(--cream); font-size: .72rem; }
.countdown-wrap { width: 8.25rem; text-align: center; }
#countdown { margin-top: .3rem; font-variant-numeric: tabular-nums; font-size: 1.28rem; letter-spacing: .045em; }

.ramadan-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: -.25rem 0 1rem;
  padding: .78rem 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--card) 88%, var(--accent-wash));
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
.ramadan-card[hidden] { display: none; }
.ramadan-heading span, .ramadan-times span { display: block; color: var(--muted); font-size: .57rem; font-weight: 730; letter-spacing: .12em; text-transform: uppercase; }
.ramadan-heading strong { display: block; margin-top: .18rem; color: var(--gold-bright); font-family: Georgia, serif; font-size: 1.02rem; font-weight: 400; }
.ramadan-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; min-width: 12.4rem; }
.ramadan-times > div { text-align: center; }
.ramadan-times strong { display: block; margin-top: .18rem; color: var(--cream); font-size: .9rem; font-variant-numeric: tabular-nums; }

.timetable-card {
  padding: 1.15rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1.5rem;
  background: var(--card);
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(18px);
}

.utility-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  margin: 1.2rem auto 0;
}
.settings-launcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: max-content;
  padding: .62rem .9rem;
  border: 1px solid var(--button-border);
  border-radius: 999px;
  color: var(--gold-bright);
  background: var(--button-bg);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
  cursor: pointer;
}
.settings-launcher:active { transform: scale(.97); }
.settings-icon { display: grid; gap: 3px; width: 1rem; }
.settings-icon i { position: relative; display: block; width: 1rem; height: 1px; background: currentColor; }
.settings-icon i::after { content: ""; position: absolute; top: -2px; width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 50%; background: var(--navy-900); }
.settings-icon i:nth-child(1)::after { left: 1px; }
.settings-icon i:nth-child(2)::after { right: 1px; }
.settings-icon i:nth-child(3)::after { left: 5px; }

.about-launcher {
  position: absolute;
  left: 0;
  bottom: .35rem;
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 1px solid var(--button-border);
  border-radius: 50%;
  color: var(--gold-bright);
  background: color-mix(in srgb, var(--button-bg) 88%, transparent);
  box-shadow: 0 .5rem 1.4rem rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(.7rem);
  -webkit-backdrop-filter: blur(.7rem);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.about-question-mark { display: block; width: 1.25rem; height: 1.25rem; color: inherit; overflow: visible; }
.about-question-mark path { fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.about-launcher:hover, .about-launcher:focus-visible { border-color: var(--gold-bright); background: color-mix(in srgb, var(--gold) 13%, var(--button-bg)); transform: translateY(-1px); }
.about-launcher:active { transform: translateY(0) scale(.96); }

.about-panel { position: fixed; z-index: 45; inset: 0; display: grid; align-items: center; padding: 1rem; overflow: hidden; overscroll-behavior: contain; }
.about-panel[hidden] { display: none; }
.about-dialog {
  position: relative;
  width: min(100%, 25rem);
  margin: 0 auto;
  padding: 1.25rem;
  border: 1px solid var(--choice-border);
  border-radius: 1.25rem;
  background: linear-gradient(145deg, color-mix(in srgb, var(--card) 94%, var(--gold) 6%), var(--settings-bg));
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.06);
}
.about-dialog .settings-heading h2 { font-size: 1.65rem; }
.about-mark { display: grid; width: 3rem; height: 3rem; margin: 1.15rem auto .8rem; padding: 0; place-items: center; border: 1px solid var(--gold-bright); border-radius: 50%; color: var(--gold-bright); }
.about-mark .about-question-mark { width: 1.55rem; height: 1.55rem; }
.about-description { margin: 0 auto; max-width: 21rem; color: var(--cream); font-family: Georgia, serif; font-size: 1rem; line-height: 1.55; text-align: center; }
.about-attribution { margin: .8rem 0 1rem; color: var(--muted); font-size: .7rem; text-align: center; }
.about-attribution a { color: var(--gold-bright); text-underline-offset: .17em; }
.about-guide-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem .9rem; border: 1px solid var(--button-border); border-radius: .85rem; color: var(--cream); background: var(--button-bg); text-decoration: none; }
.about-guide-link:hover, .about-guide-link:focus-visible { border-color: var(--gold-bright); background: color-mix(in srgb, var(--gold) 11%, var(--button-bg)); }
.about-guide-link span { display: grid; gap: .18rem; }
.about-guide-link strong { font-family: Georgia, serif; font-size: .95rem; font-weight: 400; }
.about-guide-link small { color: var(--muted); font-size: .6rem; }
.about-guide-link svg { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--gold-bright); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.modal-open { position: fixed; width: 100%; overflow: hidden; }
.settings-panel { position: fixed; z-index: 30; inset: 0; display: grid; align-items: end; overflow: hidden; overscroll-behavior: contain; }
.settings-panel[hidden] { display: none; }
.settings-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.68); }
.settings-dialog {
  position: relative;
  width: min(100%, 32rem);
  max-height: min(82svh, 46rem);
  margin: 0 auto;
  padding: 1.4rem 1rem calc(1.4rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1.5rem 1.5rem 0 0;
  background: var(--settings-bg);
  box-shadow: 0 -20px 60px rgba(0,0,0,.45);
}
.settings-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.settings-actions { display: flex; align-items: center; gap: .45rem; }
.settings-heading h2 { margin: 0; color: var(--cream); font-family: Georgia, serif; font-size: 1.75rem; font-weight: 400; }
.close-settings, .theme-launcher { border: 1px solid rgba(255,255,255,.14); border-radius: .55rem; color: var(--muted); background: transparent; cursor: pointer; }
.close-settings { padding: .45rem .6rem; font-size: .7rem; }
.theme-launcher { display: grid; width: 2.25rem; height: 2.25rem; padding: 0; place-items: center; color: var(--gold-bright); }
.theme-launcher:hover, .theme-launcher:focus-visible { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.theme-icon-stack { display: grid; width: 1.2rem; height: 1.2rem; }
.theme-icon { grid-area: 1 / 1; display: block; width: 1.2rem; height: 1.2rem; object-fit: contain; }
.theme-icon-night { opacity: 1; }
.theme-icon-day { opacity: 0; filter: sepia(.92) saturate(.96) brightness(.43) contrast(1.12) hue-rotate(334deg); }
:root[data-theme="cream"] .theme-icon-night { opacity: 0; }
:root[data-theme="cream"] .theme-icon-day { opacity: 1; }
:root[data-theme="horizon"] .theme-icon-night { opacity: var(--horizon-night-opacity); transition: opacity 62s linear; }
:root[data-theme="horizon"] .theme-icon-day { opacity: calc(1 - var(--horizon-night-opacity)); transition: opacity 62s linear; }
.settings-intro, .settings-note { color: var(--muted); font-size: .78rem; line-height: 1.55; }
.settings-intro { margin: 1rem 0 1.2rem; }
.settings-note { margin: 1rem .1rem 0; font-size: .68rem; }
.install-help { margin: 1rem .1rem 0; border-top: 1px solid var(--accent-divider); color: var(--muted); font-size: .68rem; }
.install-help summary { padding-top: .85rem; color: var(--gold-bright); cursor: pointer; font-weight: 650; letter-spacing: .015em; }
.install-help p { margin: .65rem 0 0; line-height: 1.55; }
.install-help strong { color: var(--cream); }
.install-help em { color: var(--gold-bright); font-style: normal; }
.search-label { display: block; margin: 0 0 .42rem; color: var(--gold); font-size: .62rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.theme-chooser { margin: -.25rem 0 1.1rem; padding: .9rem; border: 1px solid var(--line); border-radius: .85rem; background: color-mix(in srgb, var(--card) 78%, transparent); }
.theme-label { margin: 0 0 .65rem; color: var(--gold); font-size: .62rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.theme-option { display: flex; align-items: center; gap: .42rem; min-width: 0; padding: .45rem; border: 1px solid rgba(255,255,255,.1); border-radius: .6rem; color: var(--muted); background: var(--option-bg); font-size: .61rem; line-height: 1.2; text-align: left; cursor: pointer; }
.theme-option.is-selected { border-color: var(--gold-bright); color: var(--cream); background: color-mix(in srgb, var(--gold) 12%, var(--option-bg)); }
.theme-swatch { display: block; flex: 0 0 auto; width: 1.25rem; height: 1.25rem; border: 1px solid rgba(255,255,255,.3); border-radius: .36rem; }
.theme-swatch-midnight { background: linear-gradient(135deg, #0b213a 0 50%, #d8b765 50% 67%, #f4ead5 67%); }
.theme-swatch-desert { background: linear-gradient(135deg, #382419 0 50%, #c79a61 50% 67%, #f7ead6 67%); }
.theme-swatch-cream { background: linear-gradient(135deg, #f4ead7 0 50%, #a87848 50% 67%, #402d20 67%); }
.theme-swatch-emerald { background: linear-gradient(135deg, #07352c 0 50%, #c5a35d 50% 67%, #f4ecd9 67%); }
.theme-swatch-teal { background: linear-gradient(135deg, #06343f 0 50%, #bf9655 50% 67%, #f2ead9 67%); }
.theme-swatch-mihrab { background: linear-gradient(135deg, #28133a 0 50%, #c6a261 50% 67%, #f5ebdf 67%); }
.theme-option-adaptive { grid-column: 1 / -1; }
.theme-option-copy { display: flex; align-items: baseline; gap: .42rem; min-width: 0; }
.theme-option-copy small { color: var(--muted); font-size: .5rem; letter-spacing: .035em; }
.theme-swatch-horizon { background: linear-gradient(135deg, #f4ead7 0 38%, #b8834e 48% 58%, #392519 68% 100%); }
.masjid-search { width: 100%; padding: .8rem .9rem; border: 1px solid var(--input-border); border-radius: .75rem; color: var(--cream); background: var(--input-bg); outline: 0; }
.masjid-search::placeholder { color: var(--input-placeholder); opacity: 1; }
.masjid-search:focus { border-color: var(--gold); }
.masjid-options { display: grid; gap: .55rem; margin-top: .8rem; }
.masjid-option { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .9rem; border: 1px solid rgba(255,255,255,.1); border-radius: .85rem; color: var(--cream); background: var(--option-bg); text-align: left; cursor: pointer; }
.masjid-option.is-selected { border-color: var(--choice-border); background: var(--accent-wash); }
.masjid-option strong, .masjid-option span { display: block; }
.masjid-option strong { font-family: Georgia, serif; font-size: 1.05rem; font-weight: 400; }
.masjid-option span { margin-top: .16rem; color: var(--muted); font-size: .68rem; }
.masjid-choice-dot { width: .7rem; height: .7rem; flex: 0 0 auto; border: 1px solid var(--gold); border-radius: 50%; }
.is-selected .masjid-choice-dot { background: var(--gold-bright); box-shadow: 0 0 0 3px var(--accent-halo); }
.no-masjid-result { margin: 0; padding: 1rem .2rem; color: var(--muted); font-size: .75rem; text-align: center; }
.calculation-settings-card, .qaza-settings-card, .qibla-settings-card, .travel-notice { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .82rem .9rem; border: 1px solid var(--line); border-radius: .85rem; background: color-mix(in srgb, var(--card) 78%, transparent); }
.calculation-settings-card { margin: 1rem 0 .55rem; }
.travel-notice { margin: 0 0 .55rem; border-color: var(--choice-border); }
.travel-notice[hidden] { display: none; }
.travel-notice h3, .personal-tool h3 { margin: 0; color: var(--cream); font-family: Georgia, serif; font-size: 1.08rem; font-weight: 400; }
.travel-notice p:not(.theme-label), .personal-tool p:not(.theme-label) { max-width: 19rem; margin: .28rem 0 0; color: var(--muted); font-size: .64rem; line-height: 1.45; }
.travel-notice-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.personal-tool-card { margin: 0 0 .55rem; border: 1px solid var(--line); border-radius: .85rem; background: color-mix(in srgb, var(--card) 78%, transparent); }
.personal-tool { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .82rem .9rem; }
.qaza-settings-card { margin: 0 0 .55rem; }
.qibla-settings-card { margin: 0 0 1.15rem; }
.qaza-card-label { display: flex; align-items: center; gap: .5rem; margin-bottom: .65rem; }
.qaza-card-label .theme-label { margin: 0; }
.qaza-hub-status { display: inline-flex; align-items: center; gap: .28rem; padding: .16rem .38rem; border: 1px solid var(--accent-divider); border-radius: 999px; color: var(--muted); font-size: .52rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.qaza-hub-status::before { content: ""; width: .3rem; height: .3rem; border-radius: 50%; background: currentColor; }
.qaza-hub-status.is-active { color: var(--gold-bright); border-color: var(--choice-border); background: var(--accent-wash); }
.calculation-settings-card h3, .qaza-settings-card h3, .qibla-settings-card h3, .qaza-section-heading h3 { margin: 0; color: var(--cream); font-family: Georgia, serif; font-size: 1.08rem; font-weight: 400; }
.calculation-settings-card p:not(.theme-label), .qaza-settings-card p:not(.theme-label), .qibla-settings-card p:not(.theme-label) { max-width: 19rem; margin: .28rem 0 0; color: var(--muted); font-size: .64rem; line-height: 1.45; }
.qibla-card-copy .theme-label { margin-bottom: .65rem; }
.qaza-open-button, .qaza-save-button, .qaza-secondary-button, .qaza-import-button { border: 1px solid var(--button-border); border-radius: .65rem; color: var(--gold-bright); background: var(--button-bg); font: inherit; cursor: pointer; }
.qaza-open-button { flex: 0 0 auto; padding: .52rem .58rem; font-size: .64rem; white-space: nowrap; }

:root.quiet-mode .next-prayer::before,
:root.quiet-mode .prayer-row::before { opacity: 0; }
:root.quiet-mode .next-prayer,
:root.quiet-mode footer { display: none; }
:root.quiet-mode .prayer-name > span,
:root.quiet-mode .qaza-quick-toggle,
:root.quiet-mode .mini-clock,
:root.quiet-mode .tomorrow-preview { display: none; }
:root.quiet-mode .hero { padding-bottom: .3rem; }
:root.quiet-mode .timetable-card { padding-top: .9rem; }
:root.quiet-mode .prayer-row { min-height: 4.1rem; }
:root.quiet-mode .prayer-row.is-next { box-shadow: inset 3px 0 0 var(--gold-bright); transform: none; }

@media (max-width: 57.999rem) {
  :root.quiet-mode .app-shell { padding-top: max(.4rem, env(safe-area-inset-top)); }
  :root.quiet-mode .brand-lockup { align-items: center; }
  :root.quiet-mode .brand-lockup h1 { display: none; }
  :root.quiet-mode .brand-mark-stack { width: 3.25rem; }
  :root.quiet-mode .date-navigation { margin-top: .38rem; }
  :root.quiet-mode .timetable-card { padding: .8rem; }
  :root.quiet-mode .prayer-list { gap: .5rem; }
  :root.quiet-mode .prayer-row { min-height: 3.85rem; }
  :root.quiet-mode .utility-actions { margin-top: .8rem; }
}
.source-panel { position: fixed; z-index: 42; inset: 0; display: grid; align-items: end; overflow: hidden; overscroll-behavior: contain; }
.source-panel[hidden] { display: none; }
.source-dialog { position: relative; width: min(100%, 32rem); margin: 0 auto; padding: 1.35rem 1rem calc(1.35rem + env(safe-area-inset-bottom)); border: 1px solid rgba(255,255,255,.1); border-radius: 1.5rem 1.5rem 0 0; background: var(--settings-bg); box-shadow: 0 -20px 60px rgba(0,0,0,.45); }
.source-dialog .settings-heading .theme-label { margin-bottom: .4rem; }
.source-options { display: grid; gap: .7rem; }
.source-option { display: grid; grid-template-columns: 3.15rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; width: 100%; padding: .85rem; border: 1px solid var(--line); border-radius: .9rem; color: var(--cream); background: color-mix(in srgb, var(--card) 78%, transparent); text-align: left; cursor: pointer; }
.source-option:hover, .source-option:focus-visible { border-color: var(--choice-border); background: var(--accent-wash); }
.source-option.is-selected { border-color: var(--gold-bright); box-shadow: inset .18rem 0 var(--gold-bright); }
.source-option-icon { display: grid; width: 3.15rem; height: 3.15rem; place-items: center; border: 1px solid var(--accent-divider); border-radius: .8rem; background: var(--option-bg); }
.source-masjid-icon img { display: block; width: 2.55rem; height: 2.55rem; object-fit: contain; }
:root[data-theme="cream"] .source-masjid-icon img { content: url("ornate-masjid-mark-cream.png"); }
.calculated-source-icon { position: relative; }
.calculated-source-icon i { position: relative; width: 1.38rem; height: 1.38rem; border: .13rem solid var(--gold-bright); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.calculated-source-icon i::after { content: ""; position: absolute; top: 50%; left: 50%; width: .34rem; height: .34rem; border: .1rem solid var(--gold-bright); border-radius: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.source-option-copy { display: grid; gap: .2rem; min-width: 0; }
.source-option-copy strong { font-family: Georgia, serif; font-size: 1.05rem; font-weight: 400; }
.source-option-copy small { color: var(--muted); font-size: .63rem; line-height: 1.4; }
.source-option-status { padding: .22rem .48rem; border: 1px solid var(--accent-divider); border-radius: 999px; color: var(--muted); font-size: .53rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.source-option.is-selected .source-option-status { color: var(--gold-bright); background: var(--accent-wash); }
.calculation-panel { position: fixed; z-index: 38; inset: 0; display: grid; align-items: end; overflow: hidden; overscroll-behavior: contain; }
.calculation-panel[hidden] { display: none; }
.calculation-dialog { position: relative; width: min(100%, 34rem); max-height: min(94svh, 52rem); margin: 0 auto; padding: 1.35rem 1rem calc(1.35rem + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 1px solid rgba(255,255,255,.1); border-radius: 1.5rem 1.5rem 0 0; background: var(--settings-bg); box-shadow: 0 -20px 60px rgba(0,0,0,.45); }
.calculation-dialog .settings-heading .theme-label { margin-bottom: .4rem; }
.location-box, .calculation-options { display: grid; gap: .72rem; padding: .9rem; border: 1px solid var(--line); border-radius: .9rem; background: color-mix(in srgb, var(--card) 78%, transparent); }
.calculation-options { margin-top: .75rem; }
.calculation-section-heading { display: flex; align-items: start; justify-content: space-between; gap: .75rem; }
.calculation-section-heading .theme-label { margin-bottom: .4rem; }
.calculation-section-heading h3 { margin: 0; color: var(--cream); font-family: Georgia, serif; font-size: 1.08rem; font-weight: 400; }
.calculation-section-heading > span { padding: .2rem .45rem; border: 1px solid var(--accent-divider); border-radius: 999px; color: var(--gold-bright); font-size: .54rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.location-box > p { margin: 0; color: var(--muted); font-size: .66rem; line-height: 1.5; }
.location-primary-button { width: 100%; padding: .68rem .8rem; border: 1px solid var(--gold); border-radius: .7rem; color: var(--cream); background: color-mix(in srgb, var(--gold) 16%, var(--button-bg)); font: inherit; font-size: .7rem; font-weight: 700; cursor: pointer; }
.location-primary-button:disabled { opacity: .6; cursor: wait; }
.manual-location, .calculation-advanced { border-top: 1px solid var(--accent-divider); color: var(--muted); font-size: .64rem; }
.manual-location summary, .calculation-advanced summary { padding-top: .68rem; color: var(--gold-bright); cursor: pointer; font-weight: 650; }
.calculation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: .7rem 0; }
.calculation-grid label, .calculation-options > label { display: grid; gap: .32rem; color: var(--gold); font-size: .57rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.calculation-grid input, .calculation-options select, .fixed-calculation-method { width: 100%; min-height: 2.55rem; padding: .55rem .62rem; border: 1px solid var(--input-border); border-radius: .65rem; color: var(--cream); background: var(--input-bg); font: inherit; letter-spacing: 0; text-transform: none; outline: 0; }
.fixed-calculation-method { display: flex; align-items: center; }
.calculation-options small { color: var(--muted); font-size: .56rem; font-weight: 400; letter-spacing: 0; line-height: 1.4; text-transform: none; }
.calculation-options .automatic-location-toggle { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .65rem .7rem; border: 1px solid var(--accent-divider); border-radius: .7rem; background: var(--option-bg); }
.automatic-location-toggle span { display: grid; gap: .2rem; }
.automatic-location-toggle strong { color: var(--cream); font-size: .68rem; letter-spacing: 0; text-transform: none; }
.automatic-location-toggle input { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; accent-color: var(--gold-bright); }
.calculation-options select:focus, .calculation-grid input:focus { border-color: var(--gold); }
.qibla-panel { position: fixed; z-index: 40; inset: 0; display: grid; align-items: end; overflow: hidden; overscroll-behavior: contain; }
.qibla-panel[hidden] { display: none; }
.qibla-dialog { position: relative; width: min(100%, 32rem); max-height: min(94svh, 50rem); margin: 0 auto; padding: 1.35rem 1rem calc(1.35rem + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 1px solid rgba(255,255,255,.1); border-radius: 1.5rem 1.5rem 0 0; background: var(--settings-bg); box-shadow: 0 -20px 60px rgba(0,0,0,.45); }
.qibla-intro { max-width: 26rem; margin: .9rem auto .65rem; color: var(--muted); font-size: .72rem; line-height: 1.5; text-align: center; }
.qibla-compass-shell { position: relative; width: min(69vw, 17rem); aspect-ratio: 1; margin: .85rem auto .7rem; isolation: isolate; border: 1px solid var(--choice-border); border-radius: 50%; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--gold) 11%, transparent), transparent 42%), color-mix(in srgb, var(--option-bg) 88%, var(--card)); box-shadow: inset 0 0 0 .5rem color-mix(in srgb, var(--card) 52%, transparent), inset 0 0 0 calc(.5rem + 1px) var(--accent-divider), 0 1rem 2.8rem color-mix(in srgb, #000 34%, transparent); }
.qibla-compass-shell::before { content: ""; position: absolute; z-index: -1; inset: .55rem; border-radius: 50%; background: repeating-conic-gradient(from -1deg, color-mix(in srgb, var(--gold) 70%, transparent) 0 1deg, transparent 1deg 10deg); opacity: .5; -webkit-mask: radial-gradient(circle, transparent 0 83%, #000 83% 100%); mask: radial-gradient(circle, transparent 0 83%, #000 83% 100%); }
.qibla-compass-shell::after { content: ""; position: absolute; z-index: -1; inset: 2.15rem; border: 1px solid var(--accent-divider); border-radius: 50%; box-shadow: inset 0 0 1.5rem color-mix(in srgb, var(--gold) 8%, transparent); }
.qibla-compass-rose { position: absolute; z-index: 2; inset: 0; border-radius: 50%; transform: rotate(0deg); will-change: transform; }
.qibla-north, .qibla-east, .qibla-south, .qibla-west { position: absolute; z-index: 2; color: var(--muted); font-size: .64rem; font-weight: 750; letter-spacing: .06em; }
.qibla-north { top: 1.18rem; left: 50%; color: var(--gold-bright); transform: translateX(-50%); }
.qibla-east { top: 50%; right: 1.32rem; transform: translateY(-50%); }
.qibla-south { bottom: 1.12rem; left: 50%; transform: translateX(-50%); }
.qibla-west { top: 50%; left: 1.25rem; transform: translateY(-50%); }
.qibla-facing-marker { position: absolute; z-index: 4; top: -.42rem; left: 50%; width: .86rem; height: .86rem; border: 2px solid var(--gold-bright); border-right: 0; border-bottom: 0; transform: translateX(-50%) rotate(45deg); opacity: .72; }
.qibla-facing-direction { position: absolute; z-index: 7; top: .82rem; left: 50%; min-width: 2.2rem; padding: .18rem .4rem; border: 1px solid var(--accent-divider); border-radius: 999px; color: var(--gold-bright); background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: 0 .25rem .8rem color-mix(in srgb, #000 20%, transparent); font-size: .6rem; font-weight: 800; letter-spacing: .08em; line-height: 1; text-align: center; transform: translateX(-50%); }
.qibla-arrow { position: absolute; z-index: 3; inset: 18%; transform: rotate(0deg); will-change: transform; }
.qibla-arrow-shaft { position: absolute; left: 50%; bottom: 50%; width: .24rem; height: 43%; border-radius: 999px; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); box-shadow: 0 0 .85rem color-mix(in srgb, var(--gold-bright) 42%, transparent); transform: translateX(-50%); }
.qibla-arrow-head { position: absolute; z-index: 2; top: 1.5%; left: 50%; width: 1.12rem; height: 1.12rem; border-top: .2rem solid var(--gold-bright); border-left: .2rem solid var(--gold-bright); transform: translateX(-50%) rotate(45deg); }
.qibla-arrow-tail { position: absolute; top: 50%; left: 50%; width: .13rem; height: 31%; border-radius: 999px; background: color-mix(in srgb, var(--muted) 58%, transparent); transform: translateX(-50%); }
.qibla-hub { position: absolute; z-index: 5; top: 50%; left: 50%; width: 1.08rem; height: 1.08rem; border: .22rem solid var(--gold-bright); border-radius: 50%; background: var(--card); box-shadow: 0 0 0 .28rem color-mix(in srgb, var(--gold) 13%, transparent), 0 0 1rem color-mix(in srgb, var(--gold-bright) 35%, transparent); transform: translate(-50%, -50%); }
.qibla-compass-shell.is-aligned { border-color: var(--gold-bright); box-shadow: inset 0 0 0 .5rem color-mix(in srgb, var(--card) 52%, transparent), inset 0 0 0 calc(.5rem + 1px) var(--gold), 0 0 2.4rem color-mix(in srgb, var(--gold-bright) 24%, transparent); }
.qibla-compass-shell.is-aligned .qibla-facing-marker { opacity: 1; filter: drop-shadow(0 0 .35rem var(--gold-bright)); }
.qibla-readout { min-height: 5.2rem; text-align: center; }
.qibla-readout .theme-label { margin-bottom: .38rem; }
.qibla-readout h3 { margin: 0; color: var(--cream); font-family: Georgia, serif; font-size: 1.28rem; font-weight: 400; }
.qibla-readout p:not(.theme-label) { max-width: 24rem; margin: .35rem auto 0; color: var(--muted); font-size: .66rem; line-height: 1.45; }
.qibla-bearing { display: inline-flex; margin-top: .5rem; padding: .25rem .55rem; border: 1px solid var(--accent-divider); border-radius: 999px; color: var(--gold-bright); background: var(--accent-wash); font-size: .62rem; font-weight: 700; letter-spacing: .04em; }
.qibla-bearing[hidden] { display: none; }
.qibla-start-button { display: block; width: min(100%, 20rem); margin: .65rem auto 0; padding: .72rem 1rem; border: 1px solid var(--gold); border-radius: .72rem; color: var(--cream); background: color-mix(in srgb, var(--gold) 16%, var(--button-bg)); font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; }
.qibla-start-button:disabled { opacity: .58; cursor: wait; }
.qibla-note { max-width: 24rem; margin: .7rem auto 0; color: var(--muted); font-size: .58rem; line-height: 1.5; text-align: center; }
.qaza-panel { position: fixed; z-index: 35; inset: 0; display: grid; align-items: end; overflow: hidden; overscroll-behavior: contain; }
.qaza-panel[hidden] { display: none; }
.qaza-dialog { position: relative; width: min(100%, 32rem); max-height: min(91svh, 49rem); margin: 0 auto; padding: 1.35rem 1rem calc(1.35rem + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 1px solid rgba(255,255,255,.1); border-radius: 1.5rem 1.5rem 0 0; background: var(--settings-bg); box-shadow: 0 -20px 60px rgba(0,0,0,.45); }
.qaza-intro { margin: .9rem 0 1rem; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.qaza-school-control, .qaza-date-control, .qaza-extra-inputs label { display: grid; gap: .35rem; color: var(--gold); font-size: .58rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.qaza-school-control select, .qaza-date-control input, .qaza-extra-inputs input, .qaza-opening-grid input { width: 100%; min-height: 2.55rem; padding: .55rem .62rem; border: 1px solid rgba(255,255,255,.13); border-radius: .65rem; color: var(--cream); background: var(--input-bg); font: inherit; letter-spacing: 0; text-transform: none; outline: 0; }
.qaza-school-control select:focus, .qaza-date-control input:focus, .qaza-extra-inputs input:focus, .qaza-opening-grid input:focus { border-color: var(--gold); }
.qaza-school-note { margin: .05rem 0 0; color: var(--muted); font-size: .62rem; line-height: 1.45; }
.qaza-tracker-control { display: grid; gap: .72rem; margin-top: .9rem; padding: .85rem; border: 1px solid var(--line); border-radius: .9rem; background: color-mix(in srgb, var(--card) 78%, transparent); }
.qaza-tracker-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.qaza-tracker-heading > div { display: grid; gap: .14rem; min-width: 0; }
.qaza-tracker-control span { color: var(--gold); font-size: .54rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.qaza-tracker-control strong { color: var(--muted); font-size: .8rem; }
.qaza-tracker-control strong.is-active { color: var(--gold-bright); }
.qaza-tracker-control small { color: var(--muted); font-size: .58rem; line-height: 1.4; }
.qaza-toggle-button { flex: 0 0 auto; padding: .52rem .62rem; border: 1px solid var(--button-border); border-radius: .65rem; color: var(--gold-bright); background: var(--button-bg); font: inherit; font-size: .62rem; cursor: pointer; white-space: nowrap; }
.qaza-checkin, .qaza-summary { padding: .9rem; border: 1px solid var(--line); border-radius: .9rem; background: color-mix(in srgb, var(--card) 78%, transparent); }
.qaza-summary { margin-top: .75rem; }
.qaza-manual-entry, .qaza-advanced { margin-top: .75rem; border: 1px solid var(--line); border-radius: .82rem; background: color-mix(in srgb, var(--card) 58%, transparent); color: var(--muted); font-size: .65rem; }
.qaza-manual-entry > summary, .qaza-advanced > summary { padding: .78rem .85rem; color: var(--gold-bright); cursor: pointer; font-weight: 650; list-style-position: inside; }
.qaza-manual-entry[open] > summary, .qaza-advanced[open] > summary { border-bottom: 1px solid var(--accent-divider); }
.qaza-manual-entry .qaza-checkin { border: 0; border-radius: 0 0 .82rem .82rem; background: transparent; }
.qaza-date-control { margin-bottom: .8rem; }
.qaza-section-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.qaza-section-heading span { color: var(--muted); font-size: .58rem; }
.qaza-prayer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .48rem; }
.qaza-prayer-button { min-height: 3.45rem; padding: .45rem .6rem; border: 1px solid rgba(255,255,255,.1); border-radius: .72rem; color: var(--cream); background: var(--option-bg); text-align: left; cursor: pointer; }
.qaza-prayer-button strong, .qaza-prayer-button span { display: block; }
.qaza-prayer-button strong { color: var(--cream); font-family: Georgia, serif; font-size: .96rem; font-weight: 400; }
.qaza-prayer-button span { margin-top: .12rem; color: var(--muted); font-size: .57rem; }
.qaza-prayer-button.is-selected { border-color: var(--gold-bright); background: color-mix(in srgb, var(--gold) 15%, var(--option-bg)); box-shadow: inset 3px 0 0 var(--gold-bright); }
.qaza-prayer-button.is-selected strong { color: var(--gold-bright); }
.qaza-witr-toggle { display: flex; align-items: center; gap: .45rem; margin-top: .65rem; color: var(--muted); font-size: .65rem; }
.qaza-witr-toggle input { accent-color: var(--gold-bright); }
.qaza-extra { margin-top: .75rem; border-top: 1px solid var(--accent-divider); color: var(--muted); font-size: .65rem; }
.qaza-extra summary { padding-top: .72rem; color: var(--gold-bright); cursor: pointer; font-weight: 650; }
.qaza-extra p { margin: .55rem 0; line-height: 1.5; }
.qaza-advanced > p, .qaza-advanced > .qaza-opening-grid, .qaza-advanced > .qaza-secondary-button, .qaza-advanced > .qaza-backup-actions { margin-left: .85rem; margin-right: .85rem; }
.qaza-advanced > p { margin-top: .75rem; line-height: 1.5; }
.qaza-advanced > .qaza-backup-actions { margin-bottom: .85rem; }
.qaza-extra-inputs, .qaza-opening-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.qaza-save-button { width: 100%; margin-top: .85rem; padding: .68rem; color: var(--cream); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--button-bg)); font-size: .72rem; font-weight: 700; }
.qaza-totals { display: grid; gap: .42rem; }
.qaza-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .55rem; min-height: 2.7rem; padding: .42rem .45rem .42rem .65rem; border: 1px solid rgba(255,255,255,.08); border-radius: .62rem; background: var(--option-bg); }
.qaza-total div { display: flex; align-items: baseline; gap: .45rem; min-width: 0; }
.qaza-total strong { color: var(--cream); font-size: .9rem; font-variant-numeric: tabular-nums; }
.qaza-total span { color: var(--muted); font-size: .56rem; }
.qaza-total button { min-height: 2rem; padding: .42rem .52rem; border: 1px solid var(--button-border); border-radius: .5rem; color: var(--gold-bright); background: var(--button-bg); font: inherit; font-size: .57rem; cursor: pointer; }
.qaza-total button:disabled { opacity: .34; cursor: default; }
.qaza-completion-note { margin: .65rem .1rem 0; color: var(--muted); font-size: .58rem; line-height: 1.45; }
.qaza-opening-grid { margin: .65rem 0; }
.qaza-opening-grid label { display: grid; gap: .26rem; color: var(--muted); font-size: .56rem; text-align: center; }
.qaza-opening-grid input { min-height: 2.15rem; padding: .35rem; text-align: center; }
.qaza-secondary-button, .qaza-import-button { display: inline-flex; align-items: center; justify-content: center; padding: .52rem .58rem; font-size: .62rem; }
.qaza-backup-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .72rem; }
.qaza-import-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.card-heading { display: flex; justify-content: flex-end; padding: 0 .7rem .45rem 1rem; }
.legend { display: grid; grid-template-columns: 3.55rem 3.55rem; gap: .45rem; }
.legend span { color: var(--muted); font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-align: center; text-transform: uppercase; }

.prayer-list { display: grid; gap: .62rem; }
.data-attribution { margin: .82rem 0 0; color: var(--muted); font-size: .58rem; text-align: center; }
.data-attribution a { color: inherit; text-underline-offset: .18em; }
.data-attribution a:hover, .data-attribution a:focus-visible { color: var(--gold-bright); }
.prayer-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(5.7rem, 1fr) 3.55rem 3.55rem;
  align-items: center;
  gap: .45rem;
  min-height: 5.05rem;
  padding: .55rem .7rem .55rem 1rem;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  background: var(--row-bg);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.prayer-row::before {
  background-size: 220px 220px;
  background-position: 64% 50%;
  opacity: .18;
}
.prayer-row > * { position: relative; z-index: 1; }
.prayer-row.is-next {
  border-color: var(--selected-border);
  background: linear-gradient(100deg, var(--selected-start), var(--selected-end) 68%);
  box-shadow: inset 3px 0 0 var(--gold-bright), 0 8px 24px rgba(0,0,0,.18);
  transform: translateY(-1px);
}
.prayer-name { min-width: 0; }
.prayer-name strong { display: block; color: var(--gold-bright); font-family: Georgia, serif; font-size: 1.28rem; font-weight: 400; }
.prayer-name span { display: block; margin-top: .18rem; color: var(--muted); font-size: .61rem; letter-spacing: .035em; }
.prayer-name .next-status { display: inline-flex; align-items: center; gap: .32rem; width: max-content; margin-top: .42rem; color: var(--gold-bright); font-size: .48rem; font-weight: 760; letter-spacing: .11em; text-transform: uppercase; }
.next-status i { display: block; width: .38rem; height: .38rem; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 3px var(--accent-halo); }
.prayer-name .tomorrow-fajr-status { display: inline-flex; width: max-content; margin-top: .42rem; color: var(--gold); font-size: .48rem; font-weight: 760; letter-spacing: .11em; text-transform: uppercase; }
.prayer-row.is-tomorrow-morning { border-color: color-mix(in srgb, var(--line) 80%, var(--gold) 20%); }
.qaza-quick-toggle { display: inline-flex; align-items: center; gap: .32rem; width: max-content; min-height: 1.55rem; margin: .25rem 0 -.12rem; padding: .24rem 0; border: 0; color: var(--muted); background: transparent; font: inherit; font-size: .49rem; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.qaza-quick-toggle i { width: .42rem; height: .42rem; border: 1px solid currentColor; border-radius: 50%; }
.qaza-quick-toggle:hover, .qaza-quick-toggle:focus-visible, .qaza-quick-toggle.is-recorded { color: var(--gold-bright); }
.qaza-quick-toggle.is-recorded i { border-color: var(--gold-bright); background: var(--gold-bright); box-shadow: 0 0 0 3px var(--accent-halo); }
.time-cell { display: grid; justify-items: center; gap: .28rem; }
.time-kind { display: none; }
.time-cell time { color: var(--cream); font-size: .82rem; font-weight: 720; font-variant-numeric: tabular-nums; }
.time-cell.muted { opacity: .45; }
:root[data-timetable-mode="calculated"] .legend { grid-template-columns: 3.55rem; }
:root[data-timetable-mode="calculated"] #jamatLegend { display: none; }
:root[data-timetable-mode="calculated"] .prayer-row { grid-template-columns: minmax(6rem, 1fr) 3.55rem; }

.mini-clock { position: relative; width: 2.35rem; height: 2.35rem; border: 1.5px solid var(--clock-border); border-radius: 50%; }
.mini-clock::before, .mini-clock::after { content: ""; position: absolute; left: 50%; bottom: 50%; width: 1.5px; border-radius: 1px; background: var(--cream); transform-origin: 50% 100%; }
.mini-clock::before { height: .68rem; transform: translateX(-50%) rotate(var(--hour-angle)); }
.mini-clock::after { height: .86rem; background: var(--gold-bright); transform: translateX(-50%) rotate(var(--minute-angle)); }
.mini-clock i { position: absolute; left: 50%; top: 50%; width: .21rem; height: .21rem; border-radius: 50%; background: var(--gold-bright); transform: translate(-50%,-50%); }

footer { position: relative; padding: 1.45rem 1rem .25rem; color: var(--muted); text-align: center; }
footer p { margin: 0 auto .45rem; max-width: 25rem; font-family: Georgia, serif; font-size: .88rem; font-style: italic; line-height: 1.55; }
footer span { color: var(--gold); font-size: .63rem; letter-spacing: .12em; text-transform: uppercase; }

.quran-logo-mark { display: block; width: 100%; height: 100%; background-color: currentColor; -webkit-mask-image: url("quran-mark-v4.png"); mask-image: url("quran-mark-v4.png"); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.tilawah-gateway { position: relative; display: grid; grid-template-columns: 3.25rem minmax(0,1fr) 1.5rem; align-items: center; gap: .85rem; width: min(100%, 37rem); min-height: 4.65rem; margin: 1rem auto 0; padding: .7rem 1rem .7rem .85rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 43%, var(--line)); border-radius: 1.1rem; color: var(--cream); background: linear-gradient(125deg, color-mix(in srgb, var(--gold) 10%, var(--card)), color-mix(in srgb, var(--card) 94%, var(--page)) 68%, var(--card)); box-shadow: 0 .8rem 2rem color-mix(in srgb, var(--shadow) 44%, transparent), inset 0 1px rgba(255,255,255,.06); text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.tilawah-gateway::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 0 50%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 34%); }
.tilawah-gateway:hover, .tilawah-gateway:focus-visible { border-color: var(--gold-bright); box-shadow: 0 1rem 2.3rem color-mix(in srgb, var(--shadow) 56%, transparent), inset 0 1px rgba(255,255,255,.08); outline: none; transform: translateY(-2px); }
.tilawah-logo, .tilawah-copy, .tilawah-arrow { position: relative; z-index: 1; }
.tilawah-logo { display:block; width:3.25rem; height:3.25rem; color:var(--gold-bright); filter:drop-shadow(0 .25rem .55rem color-mix(in srgb,var(--gold) 16%,transparent)); }
.tilawah-copy { display:grid; min-width:0; gap:.08rem; }
.tilawah-kicker { color:var(--gold); font-size:.55rem; font-weight:760; letter-spacing:.15em; text-transform:uppercase; }
.tilawah-copy strong { overflow:hidden; color:var(--cream); font-family:Georgia,serif; font-size:1.08rem; font-weight:400; text-overflow:ellipsis; white-space:nowrap; }
.tilawah-copy small { color:var(--muted); font-size:.65rem; }
.tilawah-gateway.has-session .tilawah-copy strong { color:var(--gold-bright); }
.tilawah-arrow { color:var(--gold-bright); font-size:1.65rem; line-height:1; text-align:right; }

/* On phones, match the usable inner width of the prayer rows rather than the outer timetable frame. */
@media (max-width: 57.999rem) {
  .tilawah-gateway { width: calc(100% - 2.4rem); }
}

.empty-state { padding: 2rem 1rem; text-align: center; color: var(--muted); }
.empty-state strong { display: block; margin-bottom: .45rem; color: var(--cream); font-family: Georgia, serif; font-size: 1.2rem; font-weight: 400; }
.empty-state button { margin-top: 1rem; padding: .65rem 1rem; border: 1px solid var(--line); border-radius: 999px; color: var(--gold-bright); background: transparent; cursor: pointer; }

.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); max-width: calc(100vw - 2rem); padding: .65rem .95rem; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: var(--toast-text); background: var(--toast-bg); box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: .75rem; opacity: 0; pointer-events: none; transform: translate(-50%, 1rem); transition: .25s ease; }
.toast.has-action { display: flex; align-items: center; gap: .65rem; pointer-events: auto; }
.toast button { padding: .2rem .42rem; border: 0; border-left: 1px solid rgba(255,255,255,.18); color: var(--gold-bright); background: transparent; font: inherit; font-weight: 750; cursor: pointer; }
.tomorrow-preview { margin: .82rem auto -.1rem; color: var(--gold); font-size: .73rem; font-weight: 560; letter-spacing: .025em; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

@media (min-width: 34rem) {
  .app-shell { padding-inline: 0; }
  .timetable-card { padding: 1.35rem; }
  .prayer-row { min-height: 5.35rem; }
}

@media (max-width: 22rem) {
  .app-shell { padding-inline: .7rem; }
  .brand-lockup { gap: .2rem; }
  .brand-mark-stack { width: 2.75rem; }
  .hero h1 { font-size: 2.12rem; }
  .timetable-card { padding: .75rem; }
  .prayer-row { grid-template-columns: minmax(4.5rem, 1fr) 3.2rem 3.2rem; padding-left: .72rem; }
  .card-heading { padding-left: .72rem; }
  .legend { grid-template-columns: 3.2rem 3.2rem; }
  :root[data-timetable-mode="calculated"] .legend { grid-template-columns: 3.2rem; }
  :root[data-timetable-mode="calculated"] .prayer-row { grid-template-columns: minmax(4.5rem, 1fr) 3.2rem; }
  .next-prayer { padding-inline: .9rem; }
  .ramadan-card { padding-inline: .8rem; }
  .ramadan-times { gap: .5rem; min-width: 10.8rem; }
}

@media (min-width: 58rem) {
  body {
    background:
      radial-gradient(circle at 28% -8%, var(--page-glow), transparent 42rem),
      radial-gradient(circle at 82% 58%, color-mix(in srgb, var(--ambient-secondary) 16%, transparent), transparent 34rem),
      linear-gradient(180deg, var(--page-top) 0%, var(--navy-900) 42%, var(--page-bottom) 100%);
  }

  .ambient-one { left: -7rem; top: 12%; opacity: .12; }
  .ambient-two { right: -8rem; top: 48%; opacity: .12; }

  .app-shell {
    width: min(calc(100% - 3rem), 44rem);
    padding: 1rem 0 2rem;
  }

  .hero {
    padding: 0 0 .75rem;
    text-align: center;
  }
  .brand-lockup { justify-content: center; width: 100%; gap: .55rem; }
  .brand-mark-stack { width: 3.5rem; }
  .hero h1 { font-size: 3.35rem; }
  .date-navigation { width: min(100%, 30rem); max-width: 30rem; margin: .7rem auto 0; }
  .date-display strong { font-size: 1.04rem; }

  .next-prayer {
    width: min(100%, 44rem);
    min-height: 7.25rem;
    margin: 0 auto 1rem;
    padding: 1.35rem 1.5rem;
    border-radius: 1.4rem;
  }
  .ramadan-card { width: min(100%, 44rem); margin: -.25rem auto 1rem; padding: .9rem 1.15rem; }
  #nextPrayerName { font-size: 1.9rem; }
  #nextPrayerTime { font-size: .78rem; }
  .countdown-wrap { width: 9rem; }
  #countdown { font-size: 1.52rem; }

  .timetable-card {
    width: 100%;
    padding: 1.35rem;
    border-radius: 1.65rem;
  }
  .card-heading { display: none; }
  .prayer-list { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .prayer-row {
    grid-template-columns: minmax(6.2rem, 1fr) 4rem 4rem;
    gap: .55rem;
    min-height: 6.5rem;
    padding: .75rem .75rem .75rem 1.05rem;
    border-radius: 1.1rem;
  }
  .prayer-name strong { font-size: 1.42rem; }
  .prayer-name span { font-size: .65rem; }
  .time-cell { gap: .32rem; }
  .time-kind {
    display: block;
    color: var(--muted);
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .mini-clock { width: 2.65rem; height: 2.65rem; }
  .time-cell time { font-size: .86rem; }

  .tomorrow-preview { margin: .9rem auto 0; padding: 0; text-align: center; }
  .utility-actions { justify-content: center; margin: 1rem auto 0; padding: 0; }
  footer { padding: 1.35rem 1rem .25rem; text-align: center; }
  footer p { margin: 0 auto .45rem; max-width: 25rem; }

  .source-panel, .settings-panel, .calculation-panel, .qaza-panel, .qibla-panel { align-items: center; padding: 2rem; }
  .source-dialog {
    width: min(38rem, calc(100vw - 4rem));
    padding: 1.6rem;
    border-radius: 1.5rem;
    box-shadow: 0 28px 80px rgba(0,0,0,.5);
  }
  .settings-dialog {
    width: min(42rem, calc(100vw - 4rem));
    max-height: calc(100svh - 4rem);
    padding: 1.6rem;
    border-radius: 1.5rem;
    box-shadow: 0 28px 80px rgba(0,0,0,.5);
  }
  .theme-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .calculation-dialog {
    width: min(46rem, calc(100vw - 4rem));
    max-height: calc(100svh - 4rem);
    padding: 1.6rem;
    border-radius: 1.5rem;
    box-shadow: 0 28px 80px rgba(0,0,0,.5);
  }

  .qibla-dialog {
    width: min(30rem, calc(100vw - 4rem));
    max-height: calc(100svh - 4rem);
    padding: 1.6rem;
    border-radius: 1.5rem;
    box-shadow: 0 28px 80px rgba(0,0,0,.5);
  }
  .qibla-compass-shell { width: 16rem; }

  .qaza-dialog {
    width: min(61rem, calc(100vw - 4rem));
    max-height: calc(100svh - 4rem);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    padding: 1.6rem;
    border-radius: 1.5rem;
    box-shadow: 0 28px 80px rgba(0,0,0,.5);
  }
  .qaza-dialog > .settings-heading,
  .qaza-dialog > .qaza-tracker-control { grid-column: 1 / -1; }
  .qaza-summary { grid-column: 1 / -1; margin-top: 0; }
  .qaza-manual-entry, .qaza-advanced { margin-top: 0; align-self: start; }

  :root.quiet-mode .app-shell { width: min(calc(100% - 3rem), 43rem); padding-top: 1.35rem; }
  :root.quiet-mode .hero { padding-bottom: .55rem; }
  :root.quiet-mode .brand-mark-stack { width: 3.15rem; }
  :root.quiet-mode .hero h1 { font-size: 2.85rem; }
  :root.quiet-mode .date-navigation { margin-top: .48rem; }
  :root.quiet-mode .timetable-card { padding: 1rem; border-radius: 1.35rem; }
  :root.quiet-mode .prayer-list { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
  :root.quiet-mode .prayer-row {
    grid-template-columns: minmax(10rem, 1fr) 4rem 4rem;
    min-height: 4.35rem;
    padding: .56rem .8rem .56rem 1rem;
    border-radius: .9rem;
  }
  :root.quiet-mode[data-timetable-mode="calculated"] .prayer-row { grid-template-columns: minmax(10rem, 1fr) 4rem; }
  :root.quiet-mode .prayer-name strong { font-size: 1.26rem; }
  :root.quiet-mode .time-cell { gap: .16rem; }
  :root.quiet-mode .time-cell time { font-size: .78rem; }
  :root.quiet-mode .utility-actions { margin-top: .85rem; }
}

@media (min-width: 72rem) {
  .app-shell { width: min(calc(100% - 4rem), 70rem); }
  .hero { padding-bottom: .85rem; }
  .next-prayer { margin-bottom: 1.15rem; }
  .timetable-card { padding: 1.5rem; }
  .prayer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
  .prayer-row { min-height: 7rem; }
  :root.quiet-mode .app-shell { width: min(calc(100% - 4rem), 43rem); }
  :root.quiet-mode .prayer-list { grid-template-columns: minmax(0, 1fr); }
  :root.quiet-mode .prayer-row { min-height: 4.35rem; }
}

@media (min-width: 90rem) {
  .app-shell { width: min(calc(100% - 5rem), 84rem); }
  .timetable-card { padding: 1.65rem; }
  .prayer-list { gap: 1rem; }
  .prayer-row {
    grid-template-columns: minmax(8rem, 1fr) 4.5rem 4.5rem;
    gap: .7rem;
    min-height: 7.65rem;
    padding: .9rem 1rem .9rem 1.25rem;
  }
  .prayer-name strong { font-size: 1.52rem; }
  .prayer-name span { font-size: .69rem; }
  .prayer-name .next-status { font-size: .51rem; }
  .qaza-quick-toggle { font-size: .52rem; }
  .time-kind { font-size: .53rem; }
  .mini-clock { width: 2.85rem; height: 2.85rem; }
  .time-cell time { font-size: .92rem; }
  :root[data-timetable-mode="calculated"] .prayer-row { grid-template-columns: minmax(8rem, 1fr) 4.5rem; }
  :root.quiet-mode .app-shell { width: min(calc(100% - 5rem), 43rem); }
  :root.quiet-mode .prayer-list { grid-template-columns: minmax(0, 1fr); }
  :root.quiet-mode .prayer-row {
    grid-template-columns: minmax(10rem, 1fr) 4rem 4rem;
    min-height: 4.35rem;
    padding: .56rem .8rem .56rem 1rem;
  }
  :root.quiet-mode[data-timetable-mode="calculated"] .prayer-row { grid-template-columns: minmax(10rem, 1fr) 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}