/* =====================================================================
   MISR  -  portal-wide visual theme (UI_THEME=misr, or ?ui=misr)
   Fatimid Cairo: a sky band over every page with a landmark from the era of
   Imam al-Mustansir billah (Bab al-Futuh, Bab Zuwayla, Bab al-Nasr, al-Juyushi,
   al-Jami al-Anwar and its Bir, the mishkaat, mihrabs), warm sandstone pages,
   Cormorant Garamond headings, Cinzel labels, a floating tab bar with a gold pill.
   Day and Night: html[data-misr="day|night"], set in base.html (Auto = by the clock).
   Every rule is scoped to html[data-ui="misr"]:root; Jaguar 01 and Heritage are untouched.
   ===================================================================== */

@font-face { font-family: 'Cinzel'; src: url('/static/fonts/Cinzel-600.woff2') format('woff2'); font-weight: 600; font-display: block; }
@font-face { font-family: 'Cinzel'; src: url('/static/fonts/Cinzel-700.woff2') format('woff2'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/static/fonts/CormorantGaramond-600.woff2') format('woff2'); font-weight: 600; font-display: block; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/static/fonts/CormorantGaramond-700.woff2') format('woff2'); font-weight: 700; font-display: block; }

/* ---------- Palettes ---------- */
html[data-ui="misr"]:root {
  --m-sky-top: #6FAEDC; --m-sky-mid: #BFDDEE; --m-horizon: #F3DFB8;
  --m-page: #F6EDDC; --m-ink: #2B2016; --m-muted: #6B5A45; --m-card: #FFFFFF; --m-line: #E3CFA8; --m-soft: #FBF4E6;
  --m-accent: #8A5A12; --m-strong: #4A3220; --m-on-strong: #FFF3D6; --m-gold: #E2B04A; --m-gold-2: #FFE7A8;
  --m-on-sky: #2B2016; --m-kicker: #6E4A12; --m-ring: rgba(90,62,34,.35); --m-btn: rgba(255,255,255,.55);
  --m-stone: #C9A272; --m-wall: #B88F5E; --m-ground: #D9BE8E; --m-arch: #6E4A2A; --m-trim: #8A5A12; --m-kufic: #5A3E22; --m-course: #A9804F;
  --m-bar: #4A3220; --m-bar-ink: #F3E6CC; --m-shadow: 0 12px 28px -18px rgba(74,50,32,.55);
  --m-serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --m-caps: 'Cinzel', 'Trajan Pro', Georgia, serif;
  background-color: var(--m-sky-top) !important;   /* iOS draws the status-bar area from this colour */
}
html[data-ui="misr"]:root[data-misr="night"] {
  --m-sky-top: #081128; --m-sky-mid: #14234A; --m-horizon: #3B2F4A;
  --m-page: #120E0B; --m-ink: #EDE6D6; --m-muted: #B9AE9A; --m-card: #1E1813; --m-line: #4A3A26; --m-soft: #2A2118;
  --m-accent: #E2C077; --m-strong: #E2B04A; --m-on-strong: #2A1A08; --m-gold: #F2CF7A;
  --m-on-sky: #F3EAD6; --m-kicker: #E2C077; --m-ring: rgba(226,192,119,.45); --m-btn: rgba(8,17,40,.4);
  --m-stone: #4A3826; --m-wall: #3D2E1F; --m-ground: #1A1410; --m-trim: #C9A04A; --m-kufic: #E2C077; --m-course: #2E2216;
  --m-bar: rgba(18,14,11,.96); --m-bar-ink: #D8CDB8; --m-shadow: 0 12px 30px -16px rgba(0,0,0,.7);
}

/* ---------- Ground and type ---------- */
html[data-ui="misr"]:root body {
  background: var(--m-page) !important; background-image: none !important; color: var(--m-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; overflow-x: clip; min-height: 100dvh;
}
html[data-ui="misr"]:root body h1, html[data-ui="misr"]:root body h2 {
  font-family: var(--m-serif); font-weight: 700 !important; letter-spacing: 0 !important; color: var(--m-ink);
}
html[data-ui="misr"]:root body h1 { font-size: max(1.75rem, 1em); line-height: 1.1; }
html[data-ui="misr"]:root body .uppercase { font-family: var(--m-caps); letter-spacing: .14em !important; }
html[data-ui="misr"]:root body .text-slate-900, html[data-ui="misr"]:root body .text-slate-800, html[data-ui="misr"]:root body .text-slate-700 { color: var(--m-ink) !important; }
html[data-ui="misr"]:root body .text-slate-600, html[data-ui="misr"]:root body .text-slate-500, html[data-ui="misr"]:root body .text-slate-400 { color: var(--m-muted) !important; }
html[data-ui="misr"]:root body [class*="text-emerald-"] { color: var(--m-accent) !important; }
html[data-ui="misr"]:root body :is(.bg-emerald-500, .bg-emerald-600, .bg-emerald-700, .bg-emerald-800, .bg-emerald-900, .bg-emerald-950, [class*="from-emerald-"]) {
  background: var(--m-strong) !important; background-image: none !important; color: var(--m-on-strong) !important; border-color: var(--m-strong) !important; }
html[data-ui="misr"]:root body :is(.bg-emerald-500, .bg-emerald-600, .bg-emerald-700, .bg-emerald-800, .bg-emerald-900, .bg-emerald-950, [class*="from-emerald-"]) * { color: inherit !important; }
html[data-ui="misr"]:root body .today-highlight-card { border-color: var(--m-gold) !important; box-shadow: var(--m-shadow) !important; }
html[data-ui="misr"]:root body .bg-emerald-50, html[data-ui="misr"]:root body .bg-emerald-100 { background: var(--m-soft) !important; }
html[data-ui="misr"]:root body [class*="border-slate-"], html[data-ui="misr"]:root body [class*="border-emerald-"] { border-color: var(--m-line) !important; }

/* ---------- Surfaces ---------- */
html[data-ui="misr"]:root body .glass-card, html[data-ui="misr"]:root body .bg-white, html[data-ui="misr"]:root body .bg-white\/80, html[data-ui="misr"]:root body .bg-white\/70 {
  background: var(--m-card) !important; color: var(--m-ink); backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--m-line) !important; box-shadow: var(--m-shadow) !important;
}
html[data-ui="misr"]:root body .rounded-3xl, html[data-ui="misr"]:root body .glass-card { border-radius: 20px !important; }
html[data-ui="misr"]:root body .rounded-2xl { border-radius: 16px !important; }
html[data-ui="misr"]:root body .bg-slate-50, html[data-ui="misr"]:root body .bg-slate-100 { background: var(--m-soft) !important; }
html[data-ui="misr"]:root body .divide-slate-100 > * + * { border-color: var(--m-line) !important; }
html[data-ui="misr"]:root body input:not([type="checkbox"]):not([type="radio"]), html[data-ui="misr"]:root body textarea, html[data-ui="misr"]:root body select {
  background: var(--m-soft) !important; color: var(--m-ink) !important; border-color: var(--m-line) !important;
}

/* ---------- Header: the top of the sky ---------- */
html[data-ui="misr"]:root body .glass-nav {
  background: var(--m-sky-top) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 0 !important; box-shadow: none !important; color: var(--m-on-sky);
}
html[data-ui="misr"]:root .brand-title { font-family: var(--m-caps); font-weight: 700; font-size: 14px; letter-spacing: .12em; color: var(--m-on-sky); }
html[data-ui="misr"]:root .brand-sub { font-size: 9.5px; font-weight: 700; letter-spacing: .22em; color: var(--m-kicker); }
html[data-ui="misr"]:root .lg-wrap { background: none; border-radius: 999px; padding: 0; box-shadow: none; }
/* Sign-in logo: the round "Anjuman-e-Saifee" lettering is a separate layer (Logo_text.png) drawn in the ink colour */
html[data-ui="misr"]:root .lg-wrap { display: inline-grid; place-items: center; }
html[data-ui="misr"]:root .lg-wrap > img, html[data-ui="misr"]:root .lg-wrap > .lg-arc { grid-area: 1 / 1; width: 100% !important; height: 100% !important; }
html[data-ui="misr"]:root .lg-wrap > .lg-arc { display: block; background-color: var(--m-strong);
  -webkit-mask: url('Logo_text.png') center / contain no-repeat; mask: url('Logo_text.png') center / contain no-repeat; }
/* "ANJUMAN-E-SAIFEE" in brown by day (gold by night, where brown would not show) */
html[data-ui="misr"]:root body :is(h1.text-slate-900, .brand-title) { color: var(--m-strong) !important; }
html[data-ui="misr"]:root body .glass-nav .icon-btn {
  background: var(--m-btn) !important; color: var(--m-on-sky) !important; border: 1px solid var(--m-ring) !important;
  border-radius: 999px !important; box-shadow: none !important;
}
@media (max-width:390px) { html[data-ui="misr"]:root .brand-title { font-size: 13px; letter-spacing: .08em; } html[data-ui="misr"]:root .brand-sub { letter-spacing: .14em; } }

/* ---------- The landmark band (every page) ---------- */
html[data-ui="misr"]:root .misr-band {
  position: relative; overflow: hidden; color: var(--m-on-sky);
  background: linear-gradient(180deg, var(--m-sky-top) 0%, var(--m-sky-mid) 55%, var(--m-horizon) 100%);
  border-radius: 0 0 26px 26px; padding-top: 34px; margin-bottom: 4px;
}
html[data-ui="misr"]:root .misr-band.is-home { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-top: 0;
  background: linear-gradient(180deg, var(--m-sky-mid) 0%, var(--m-horizon) 100%); }
html[data-ui="misr"]:root .misr-band .mb-scene { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
html[data-ui="misr"]:root .misr-band .mb-sky { position: absolute; inset: 0; pointer-events: none; }
html[data-ui="misr"]:root .misr-band .mb-cap {
  position: absolute; left: 16px; top: 10px; font-family: var(--m-caps); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; color: var(--m-kicker); opacity: .9;
}
html[data-ui="misr"]:root .misr-band.is-home .mb-cap { top: auto; bottom: 8px; left: auto; right: 14px; }
html[data-ui="misr"]:root .mb-day { display: block; } html[data-ui="misr"]:root .mb-night { display: none; }
html[data-ui="misr"]:root[data-misr="night"] .mb-day { display: none; } html[data-ui="misr"]:root[data-misr="night"] .mb-night { display: block; }
html[data-ui="misr"]:root .mb-sun { position: absolute; right: 18px; top: 4px; width: 64px; height: 64px; }
html[data-ui="misr"]:root .mb-moon { position: absolute; right: 22px; top: 8px; }

/* scene paints */
html[data-ui="misr"]:root .ms { fill: var(--m-stone); } html[data-ui="misr"]:root .mw { fill: var(--m-wall); }
html[data-ui="misr"]:root .mg { fill: var(--m-ground); } html[data-ui="misr"]:root .mt { stroke: var(--m-trim); fill: none; }
html[data-ui="misr"]:root .mtf { fill: var(--m-trim); } html[data-ui="misr"]:root .mk { fill: var(--m-kufic); }
html[data-ui="misr"]:root .mc { stroke: var(--m-course); }

/* motion */
@keyframes m-tw { 0%,100% { opacity: .2 } 50% { opacity: 1 } }
@keyframes m-glow { 0%,100% { opacity: .72 } 50% { opacity: 1 } }
@keyframes m-spin { to { transform: rotate(360deg) } }
@keyframes m-drift { from { transform: translateX(-120px) } to { transform: translateX(110vw) } }
@keyframes m-band { 0%,100% { opacity: .7 } 50% { opacity: 1 } }
@keyframes m-sway { 0%,100% { transform: rotate(-4deg) } 50% { transform: rotate(4deg) } }
@keyframes m-flag { 0%,100% { transform: skewY(0) scaleX(1) } 50% { transform: skewY(-6deg) scaleX(.92) } }
@keyframes m-up { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
html[data-ui="misr"]:root .m-tw { animation: m-tw 3s ease-in-out infinite; }
html[data-ui="misr"]:root .m-glow { animation: m-glow 4s ease-in-out infinite; }
html[data-ui="misr"]:root .m-spin { animation: m-spin 40s linear infinite; transform-origin: 50% 50%; }
html[data-ui="misr"]:root .m-drift { position: absolute; left: 0; animation: m-drift 42s linear infinite; }
html[data-ui="misr"]:root .m-band { animation: m-band 3.5s ease-in-out infinite; }
html[data-ui="misr"]:root .m-sway { animation: m-sway 4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
html[data-ui="misr"]:root .m-flag { animation: m-flag 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 0 50%; }
/* Moving between pages: no fade-from-blank or slide-up on every load (that read as a flicker);
   the browser cross-fades the old page into the new one while the header and tab bar stay put. */
html[data-ui="misr"]:root main, html[data-ui="misr"]:root main > * { animation: none !important; }
@view-transition { navigation: auto; }
html[data-ui="misr"]:root header.glass-nav { view-transition-name: m-head; }
html[data-ui="misr"]:root nav.dock { view-transition-name: m-dock; }
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .2s; }
/* Header and tab bar don't cross-fade (two pills / two fonts showing at once looked like a flicker):
   the old one stays on screen for the 0.2s and the new one takes over at the end. The pill has
   already moved to the tapped tab (base.html), so nothing changes in them at the swap. */
::view-transition-old(m-dock), ::view-transition-old(m-head) { animation: none; opacity: 1; }
::view-transition-new(m-dock), ::view-transition-new(m-head) { animation: none; opacity: 0; }
::view-transition-group(m-dock), ::view-transition-group(m-head) { animation: none; }
html[data-ui="misr"]:root #nav-bar { background: var(--m-gold) !important; box-shadow: 0 0 8px rgb(226 176 74 / .6) !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-ui="misr"]:root .m-tw, html[data-ui="misr"]:root .m-glow, html[data-ui="misr"]:root .m-spin, html[data-ui="misr"]:root .m-drift,
  html[data-ui="misr"]:root .m-band, html[data-ui="misr"]:root .m-sway, html[data-ui="misr"]:root .m-flag, html[data-ui="misr"]:root main > * { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Home: the date sits in the sky above Bab al-Futuh ---------- */
html[data-ui="misr"]:root .date-hero {
  margin: -24px calc(50% - 50vw) 0; padding: 10px 16px 4px; border: 0 !important; border-radius: 0;
  background: linear-gradient(180deg, var(--m-sky-top), var(--m-sky-mid));
  flex-direction: column-reverse; align-items: center !important; justify-content: center; gap: 4px; text-align: center; color: var(--m-on-sky);
}
html[data-ui="misr"]:root .dh-left { flex-direction: column; align-items: center !important; gap: 0 !important; }
html[data-ui="misr"]:root .dh-left > span { padding: 0 !important; text-align: center; }
html[data-ui="misr"]:root body .date-hero .dh-day { font-family: var(--m-serif); font-weight: 700 !important; font-size: 68px !important; letter-spacing: 0 !important; line-height: .95; color: var(--m-accent) !important; }
html[data-ui="misr"]:root[data-misr="night"] body .date-hero .dh-day { color: #F2CF7A !important; text-shadow: 0 0 22px rgba(242,207,122,.4); }
html[data-ui="misr"]:root body .date-hero .dh-month { font-family: var(--m-serif); font-weight: 600 !important; font-size: 25px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--m-on-sky) !important; white-space: nowrap; }
html[data-ui="misr"]:root .dh-year { font-family: var(--m-caps); font-size: 11px; font-weight: 700; letter-spacing: .26em !important; color: var(--m-kicker) !important; margin-top: 4px !important; }
html[data-ui="misr"]:root .dh-right { align-self: center !important; padding: 0 !important; }
html[data-ui="misr"]:root .dh-greg { font-family: var(--m-caps); color: var(--m-kicker) !important; font-size: 11px; font-weight: 700; letter-spacing: .26em !important; }
html[data-ui="misr"]:root .dh-cal { color: var(--m-accent) !important; }
html[data-ui="misr"]:root .miqaat-line { justify-content: center; color: var(--m-accent); }
html[data-ui="misr"]:root .date-hero + .miqaat-line { margin-top: 6px; }

/* Greeting */
html[data-ui="misr"]:root .greet-label { font-family: var(--m-caps); color: var(--m-accent) !important; letter-spacing: .22em !important; }
html[data-ui="misr"]:root .greet-name { font-family: var(--m-serif); font-weight: 700 !important; font-size: 27px !important; letter-spacing: 0 !important; color: var(--m-ink) !important; }
html[data-ui="misr"]:root .ring-avatar { border-radius: 999px !important; background: var(--m-gold) !important; padding: 2px !important; }
html[data-ui="misr"]:root .ring-avatar img { border-radius: 999px !important; border-color: var(--m-card) !important; }

/* Notices */
html[data-ui="misr"]:root body .bn-card { background: var(--m-soft) !important; color: var(--m-ink) !important; border: 1px solid var(--m-line); border-radius: 18px !important; }
html[data-ui="misr"]:root .bn-card::after { display: none; }
html[data-ui="misr"]:root .bn-ic { background: rgba(226,176,74,.18) !important; color: var(--m-accent) !important; }
html[data-ui="misr"]:root .bn-t { font-family: var(--m-serif); font-size: 18px; font-weight: 700; }
html[data-ui="misr"]:root .bn-b { color: var(--m-muted); opacity: 1; }
html[data-ui="misr"]:root .bn-x { background: transparent !important; color: var(--m-accent) !important; }
html[data-ui="misr"]:root .alert-row { border-radius: 16px !important; background: var(--m-card) !important; border-color: var(--m-line) !important; color: var(--m-ink) !important; }

/* Today's thali */
html[data-ui="misr"]:root .home-stagger a.block.rounded-3xl {
  background: var(--m-card) !important; border: 1.5px solid var(--m-gold) !important; border-left-width: 1.5px !important;
  box-shadow: var(--m-shadow) !important; border-radius: 20px !important;
}
html[data-ui="misr"]:root .home-stagger a.block.rounded-3xl > div > span:first-child { background: rgba(226,176,74,.18) !important; color: var(--m-accent) !important; border-radius: 999px !important; }
html[data-ui="misr"]:root .home-stagger a.block.rounded-3xl .font-extrabold.truncate,
html[data-ui="misr"]:root .home-stagger a.block.rounded-3xl .break-words { font-family: var(--m-serif); font-weight: 700 !important; font-size: 21px !important; color: var(--m-ink) !important; white-space: normal; line-height: 1.2; }

/* Service tiles */
html[data-ui="misr"]:root .home-stagger .grid.grid-cols-2:has(> .qtile) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html[data-ui="misr"]:root .qtile {
  align-items: center; text-align: center; gap: 8px !important; padding: 16px 6px 14px !important;
  background: var(--m-card) !important; border: 1px solid var(--m-line) !important; border-radius: 18px !important; box-shadow: none !important;
}
html[data-ui="misr"]:root .qtile::after { display: none; }
html[data-ui="misr"]:root .qtile .qicon { width: 46px !important; height: 46px !important; border-radius: 999px !important; justify-content: center !important;
  background: rgba(226,176,74,.16) !important; color: var(--m-accent) !important; box-shadow: inset 0 0 0 1px var(--m-line); }
html[data-ui="misr"]:root .qtile .qicon svg { width: 23px; height: 23px; stroke-width: 1.7; }
html[data-ui="misr"]:root .qtile .qt { font-family: var(--m-caps); font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: none !important; color: var(--m-ink) !important; }
html[data-ui="misr"]:root .qtile .qs { font-size: 11px !important; color: var(--m-muted) !important; line-height: 1.3; }
html[data-ui="misr"]:root .qtile .go { display: none; }

/* ---------- Bottom bar: floating, with a gold pill ---------- */
html[data-ui="misr"]:root body .dock {
  left: 12px !important; right: 12px !important; width: auto !important; max-width: 460px; margin: 0 auto;
  transform: translate3d(0,0,0) !important; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: var(--m-bar) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--m-trim) !important; border-radius: 32px !important; box-shadow: 0 14px 30px -12px rgba(74,50,32,.55) !important;
}
html[data-ui="misr"]:root body .dock-item { color: var(--m-bar-ink) !important; border-radius: 26px !important; font-family: var(--m-caps); font-size: 10px; letter-spacing: .04em; }
html[data-ui="misr"]:root body .dock-item.active { background: linear-gradient(180deg, #FFE7A8, #E2B04A) !important; color: #3A2412 !important; box-shadow: none !important; font-weight: 700; }
html[data-ui="misr"]:root body .dock-badge { box-shadow: 0 0 0 2px var(--m-bar); }
html[data-ui="misr"]:root body .dock-scrim { background: linear-gradient(to bottom, transparent, var(--m-page) 60%); }

/* ---------- Side menu and popovers ---------- */
html[data-ui="misr"]:root .nm-label { font-family: var(--m-caps); color: var(--m-accent) !important; letter-spacing: .16em !important; }
html[data-ui="misr"]:root .nm-name { font-family: var(--m-serif); font-weight: 700 !important; font-size: 19px; }
html[data-ui="misr"]:root .flash { border-radius: 14px; }

/* ---------- One palette only: Misr is always gold and brown ----------
   The colour-theme scales (--e-*, --t-*, and night's --d-*) are locked to sandstone and gold,
   so every accent that uses them follows Misr, and the colour picker is hidden while Misr is on. */
html[data-ui="misr"][data-misr]:root {
  --e-50: 251 244 230; --e-100: 243 227 194; --e-200: 230 206 160; --e-300: 217 178 106; --e-400: 201 151 76; --e-500: 168 116 31;
  --e-600: 138 90 18; --e-700: 110 74 42; --e-800: 74 50 32; --e-900: 58 36 18; --e-950: 42 26 8;
  --t-50: 251 244 230; --t-100: 243 227 194; --t-200: 230 206 160; --t-300: 226 176 74; --t-400: 226 176 74; --t-500: 201 151 76;
  --t-600: 168 116 31; --t-700: 138 90 18; --t-800: 110 74 42; --t-900: 74 50 32; --t-950: 42 26 8;
  --bg-1: 246 237 220; --bg-2: 251 244 230;
}
html[data-ui="misr"][data-misr="night"]:root {
  --e-50: 42 33 24; --e-100: 58 45 30; --e-200: 90 70 48; --e-300: 140 110 70; --e-400: 201 160 74; --e-500: 226 176 74;
  --e-600: 242 207 122; --e-700: 242 207 122; --e-800: 255 227 160; --e-900: 255 240 210; --e-950: 255 248 230;
  --d-50: 255 248 230; --d-100: 255 240 210; --d-200: 242 207 122; --d-300: 226 176 74; --d-400: 201 160 74; --d-500: 168 116 31;
  --d-600: 138 90 18; --d-700: 110 74 42; --d-800: 74 56 38; --d-900: 42 33 24; --d-950: 30 24 18;
  --bg-1: 18 14 11; --bg-2: 30 24 19;
}
html[data-ui="misr"]:root #look-pop .look-h:has(#theme-name),
html[data-ui="misr"]:root #look-pop .look-h:has(#theme-name) + .look-row { display: none !important; }

/* ---------- Expenses pages (they carry their own small palette) ---------- */
html[data-ui="misr"]:root body .ex-card { background: var(--m-card) !important; border-color: var(--m-line) !important; color: var(--m-ink); border-radius: 16px; }
html[data-ui="misr"]:root body .ex-stat[style] { background: var(--m-soft) !important; border-color: var(--m-gold) !important; }
html[data-ui="misr"]:root body .ex-stat[style] span { color: var(--m-accent) !important; }
html[data-ui="misr"]:root body .ex-stat span { font-family: var(--m-caps); color: var(--m-accent); }
html[data-ui="misr"]:root body .ex-stat b { font-family: var(--m-serif); font-size: 1.6rem; font-weight: 700; color: var(--m-ink); }
html[data-ui="misr"]:root body .ex-btn { border-color: var(--m-line) !important; color: var(--m-ink); border-radius: 999px; }
html[data-ui="misr"]:root body .ex-btn.solid { background: var(--m-strong) !important; border-color: var(--m-strong) !important; color: var(--m-on-strong) !important; }
html[data-ui="misr"]:root body :is(.ex-pill.approved, .ex-ok) { background: var(--m-soft) !important; color: var(--m-accent) !important; border-color: var(--m-gold) !important; }
html[data-ui="misr"]:root body .text-neutral-500, html[data-ui="misr"]:root body .text-neutral-600 { color: var(--m-muted) !important; }

/* Thali filler: the "Menu for <day>" card stays a dark brown card (its text is light) */
html[data-ui="misr"]:root body .glass-card.menu-banner {
  background: linear-gradient(160deg, #5A3D24, #3A2412) !important; border: 1px solid var(--m-gold) !important; color: #FFF3D6 !important;
}
html[data-ui="misr"]:root body .menu-banner :is(h3, svg, span.flex) { color: #F2CF7A !important; }
html[data-ui="misr"]:root body .menu-banner p { color: #FFF3D6 !important; }
html[data-ui="misr"]:root body .menu-banner p .text-slate-400 { color: #D9C6A3 !important; }
html[data-ui="misr"]:root body .menu-banner > div:first-child { border-color: rgba(242,207,122,.35) !important; }

/* iPhone (iOS 26) softens and fades whatever scrolls under the status bar, and a sticky header counts,
   so the name and buttons looked washed out. A fixed header is treated as a bar and stays crisp;
   base.html keeps the page pushed down by the header's height. */
html[data-ui="misr"]:root body header.glass-nav { position: fixed !important; top: 0; left: 0; right: 0; }
/* only pages that have the top bar (not the sign-in page) */
html[data-ui="misr"]:root body:has(header.glass-nav) { padding-top: var(--m-head-h, calc(env(safe-area-inset-top, 0px) + 64px)); }
html[data-ui="misr"]:root body #global-page-loader .animate-3d-float { display: grid; place-items: center; }
html[data-ui="misr"]:root body #global-page-loader .animate-3d-float > img, html[data-ui="misr"]:root body #global-page-loader .animate-3d-float > .lg-arc { grid-area: 1 / 1; }
html[data-ui="misr"]:root body #global-page-loader .lg-arc { display: block; width: 64px; height: 64px; background-color: #4A3220;
  -webkit-mask: url('Logo_text.png') center / contain no-repeat; mask: url('Logo_text.png') center / contain no-repeat; }
html[data-ui="misr"][data-bigloader] body #global-page-loader .lg-arc { width: 160px; height: 160px; }