/* Islamic Tracker shared theme (dark, matches the homepage: Fraunces headings, system/Inter body, green-black + sage).
   Loaded after each page's own <style>, so it restyles the shared components
   and remaps the old light-theme tokens that page CSS and inline styles use. */
:root{
  --ink:#0c110e; --ink-2:#141a16; --ink-3:#1c231e;
  --line:rgba(255,250,243,.10); --line-solid:#2a332d;
  --parchment:#fffaf3; --sage:rgba(255,250,243,.64);
  /* "brass" was the old single accent; it is now sage green. Amber stays as a secondary accent only. */
  --brass:#a8c79b; --brass-2:#c6dcbb; --amber:#e8b078;
  --brass-soft:rgba(168,199,155,.14); --leaf:#5fae74; --leaf-2:#8fcf9f; --leaf-soft:rgba(95,174,116,.16);
  --f-display:"Fraunces","New York",Georgia,serif;
  --f-body:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,"Segoe UI",sans-serif;
  --f-arabic:"Amiri","Geeza Pro","Traditional Arabic",serif;
  --r:22px;
  color-scheme:dark;
  /* old tokens, remapped for the dark theme */
  --green-dark:var(--parchment); --green-mid:var(--leaf-2); --green-light:var(--leaf-2); --green-pale:#17201a;
  --gold:var(--brass); --gold-light:var(--brass-2); --white:var(--ink-2);
  --gray-50:#101612; --gray-100:var(--ink-2); --gray-200:var(--line-solid); --gray-600:var(--sage); --gray-800:var(--parchment);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 10px 30px -12px rgba(0,0,0,.6); --shadow-lg:0 30px 60px -20px rgba(0,0,0,.7);
}
/* Inter (Latin only) comes first so the script font, not the system font, renders the local script. */
html:lang(ar){--f-display:"Fraunces","Amiri",serif;--f-body:"Inter","Amiri","Noto Naskh Arabic",serif}
html:lang(ur){--f-display:"Fraunces","Noto Nastaliq Urdu","Amiri",serif;--f-body:"Inter","Noto Nastaliq Urdu","Amiri",serif}
html:lang(bn){--f-display:"Fraunces","Noto Sans Bengali",sans-serif;--f-body:"Inter","Noto Sans Bengali",sans-serif}
html:lang(hi){--f-display:"Fraunces","Noto Sans Devanagari",sans-serif;--f-body:"Inter","Noto Sans Devanagari",sans-serif}

html{background:var(--ink)}
body{background:var(--ink);color:var(--parchment);font-family:var(--f-body);font-size:17px;-webkit-font-smoothing:antialiased}
a{color:var(--brass)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:8px}
h1,h2{font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;line-height:1.08;color:var(--parchment)}
h3{color:var(--parchment)}
p,li{color:var(--sage)}
b,strong{color:var(--parchment)}
::selection{background:var(--brass-soft)}

/* top nav */
body>nav,.topnav{position:sticky;top:0;z-index:100;background:rgba(12,17,14,.78)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:none!important;border-bottom:1px solid var(--line)}
.nav-brand span{font-family:var(--f-body);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;color:var(--parchment)}
.nav-brand img{width:34px;height:34px;border-radius:9px;box-shadow:none}
.nav-links a{color:var(--sage)}
.nav-links a:hover{color:var(--parchment)}
.nav-links a.nav-cta,.nav-cta{background:var(--parchment)!important;color:var(--ink)!important;border-radius:999px;font-weight:600!important;font-size:.88rem}
.nav-links a.nav-cta:hover,.nav-cta:hover{background:#fff!important}
.hamburger span{background:var(--parchment)}
.nav-links.mobile-open{background:var(--ink)!important}
.nav-links.mobile-open li a{background:var(--ink)!important;border-bottom:1px solid var(--line)!important;color:var(--parchment)!important}
.nav-links.mobile-open li a.nav-cta{background:var(--parchment)!important;color:var(--ink)!important}
.topnav a{color:var(--sage)}
.topnav a:hover{color:var(--parchment)}
.topnav .sep{color:var(--line-solid)}

/* page heroes: night sky like the homepage */
.page-hero,.hero,.header{background:radial-gradient(60% 70% at 75% 0%,rgba(168,199,155,.13),transparent 70%),radial-gradient(45% 60% at 5% 0%,rgba(95,174,116,.10),transparent 70%),var(--ink)!important;color:var(--parchment);border-bottom:1px solid var(--line)}
.page-hero h1,.hero h1,.header h1{font-family:var(--f-display);font-weight:600;color:var(--parchment);letter-spacing:-.02em;line-height:1.06}
.page-hero h1{font-size:clamp(2.3rem,6vw,3.6rem)}
.page-hero p,.hero p,.header p{color:var(--sage)}
.page-hero h1 span,.hero h1 span{color:var(--brass);font-style:normal}
.crumbs,.crumbs a{color:var(--sage)}
.hero::before,.hero-circle,#share::before{opacity:0!important;background:none!important}
.hero-badge,.badge:not(a){background:var(--brass-soft)!important;border:1px solid rgba(168,199,155,.3)!important;color:var(--brass)!important}
.hero-stats{border-top-color:var(--line)}
.stat-num{font-family:var(--f-display);font-weight:600;color:var(--brass)}
.stat-lbl{color:var(--sage)}

/* section headings */
.section-label{background:transparent!important;border:0!important;padding:0!important;color:var(--sage)!important;letter-spacing:.16em;font-weight:600}
.section-title{font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;color:var(--parchment)!important}
.section-sub{color:var(--sage)}
h2{font-weight:600}

/* surfaces */
#features,#why,#faq,#contact,.contact-form{background:transparent!important}
.card,.calc,.feature-card,.faq-item,.contact-wrap,.tool,.app-panel:not(.dl){border-color:var(--line)!important;box-shadow:none!important}
.feature-card::before{background:linear-gradient(90deg,var(--leaf),var(--brass))!important;opacity:.6}
.feature-card:hover{background:var(--ink-3)}
.feature-icon,.check-icon{background:var(--leaf-soft)!important}
.contact-info{background:var(--ink-3)!important;color:var(--parchment)}
.contact-info p,.contact-detail-text{color:var(--sage)}
.contact-icon{background:var(--brass-soft)!important}
.wrap .card h2,.card h2{border-bottom-color:var(--line)}

/* forms */
input,select,textarea{background:var(--ink)!important;color:var(--parchment)!important;border-color:var(--line-solid)!important;color-scheme:dark}
input::placeholder,textarea::placeholder{color:rgba(255,250,243,.42)}
input:focus,select:focus,textarea:focus{border-color:rgba(168,199,155,.6)!important;box-shadow:0 0 0 3px rgba(168,199,155,.12)!important}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--leaf)}
.btn,.btn-submit,button.btn{background:var(--parchment)!important;color:var(--ink)!important;border:0}
.btn:hover,.btn-submit:hover{background:#fff!important}
.toggle{border-color:var(--line-solid)!important}
.toggle button{color:var(--sage)}
.toggle button.active{background:var(--leaf)!important;color:#fff!important}
.form-success{background:var(--leaf-soft)!important;color:var(--parchment)!important}

/* tables */
.table-wrap{border-color:var(--line)!important}
th{background:var(--ink-2)!important;color:var(--parchment)!important}
th,td{border-bottom-color:var(--line)!important}
td{color:var(--sage)}
tr.today td{background:var(--leaf-soft)!important;color:var(--parchment)!important}

/* FAQ */
.faq-item{background:var(--ink-2)}
.faq-item summary{color:var(--parchment)!important;font-weight:500}
.faq-item summary::after{color:var(--brass)!important}

/* download blocks: homepage closing-card style */
.app-box,.dl,.cta,.app-panel,.it-dl{position:relative;border:1px solid rgba(168,199,155,.25)!important;border-radius:28px!important;background:radial-gradient(80% 120% at 50% 0%,rgba(168,199,155,.16),transparent 60%),var(--ink-2)!important;color:var(--parchment)!important;box-shadow:none!important}
.app-box h2,.app-box h3,.dl h2,.dl h3,.cta h2,.cta h3,.app-panel h2,.app-panel h3,.it-dl-title{font-family:var(--f-display)!important;font-weight:600!important;color:var(--parchment)!important;font-size:clamp(1.6rem,4vw,2.2rem)!important;line-height:1.1!important;letter-spacing:-.02em}
.app-box p,.dl p,.cta p,.app-panel p,.it-dl p{color:var(--sage)!important}
.app-box a:not(.store-btn):not(.badge),.cta p a,.app-panel p a{color:var(--brass)}
.hero-dl{background:rgba(255,255,255,.03)!important;border:1px solid rgba(168,199,155,.3)!important;border-radius:18px!important}
.hero-dl p{color:var(--brass-2)!important}
.app-cta{background:var(--brass-soft)!important;color:var(--parchment)!important;border:1px solid rgba(168,199,155,.22)}
.app-cta a{color:var(--brass)!important}

/* store buttons: parchment primary, dark secondary */
.store-btn,a.badge,.btn-primary,.share-btn.copy-btn,.cta a:not(.alt):not(.ios),.it-store{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--parchment)!important;color:var(--ink)!important;border:1px solid transparent!important;border-radius:14px!important;box-shadow:none!important;font-weight:700;text-decoration:none}
.store-btn:hover,a.badge:hover,.btn-primary:hover,.cta a:hover,.it-store:hover{background:#fff!important;transform:translateY(-2px);filter:none}
.store-btn.alt,.store-btn.ios,a.badge.ios,.btn-appstore,.btn-secondary,.cta a.alt,.cta a.ios,.it-store.alt{background:var(--ink)!important;color:var(--parchment)!important;border:1px solid rgba(255,250,243,.18)!important}
.store-btn.alt:hover,.store-btn.ios:hover,a.badge.ios:hover,.btn-appstore:hover,.btn-secondary:hover,.cta a.alt:hover,.it-store.alt:hover{background:var(--ink-3)!important;border-color:rgba(255,250,243,.35)!important}

/* shared download block added to pages that had none */
.it-dl{margin:48px auto 56px;max-width:860px;padding:clamp(36px,6vw,56px) clamp(20px,5vw,48px);text-align:center;display:grid;gap:18px;justify-items:center}
.it-dl-title{margin:0}
.it-stores{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.it-store{padding:12px 22px;font-size:1rem;font-family:var(--f-body)}
.it-store svg{width:22px;height:22px;flex:none}
.it-wrap{padding:0 16px}

/* share */
.share-btn{box-shadow:none!important}
.share-btn.whatsapp,.share-btn.telegram,.share-btn.twitter,.share-btn.email-btn{background:var(--ink)!important;color:var(--parchment)!important;border:1px solid var(--line-solid)!important}
.share-note{color:var(--sage)}
#share{background:var(--ink-2)!important;border-block:1px solid var(--line)}
.copy-toast{background:var(--ink-3)!important;color:var(--parchment)!important;border-color:var(--line)!important}
.fab-share{background:var(--brass)!important;color:var(--ink)!important;box-shadow:0 10px 30px -10px rgba(0,0,0,.7)!important}
.fab-share .fab-tooltip{background:var(--ink-3)!important;color:var(--parchment)!important}

/* chips and link lists */
.links a,.near a,.chip{background:transparent!important;border:1px solid var(--line-solid);color:var(--parchment)!important}
.links a:hover,.near a:hover{border-color:rgba(168,199,155,.5)}
.note,.box{background:var(--ink-2)!important;color:var(--sage)!important}
.box p,.note p{color:var(--sage)}
.plan{background:var(--brass-soft)!important;border-color:rgba(168,199,155,.3)!important}
.plan input{background:var(--ink)!important}

/* footer */
footer,.footer{background:var(--ink)!important;color:var(--sage)!important;border-top:1px solid var(--line)}
.footer-brand span{font-family:var(--f-body);font-weight:600;font-size:1.02rem;color:var(--parchment)}
.footer-brand img{width:34px;height:34px;border-radius:9px}
.footer-top,.lang-switch{border-color:var(--line)!important}
.footer-links{position:static!important;background:transparent!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important}
.footer-links a,.lang-switch a{color:var(--sage)!important}
.footer-links a:hover,.lang-switch a:hover{color:var(--parchment)!important}
.lang-switch a[aria-current="page"]{color:var(--brass)!important}
.lang-switch .lang-label{color:var(--sage)}
.footer-bottom,.footer-bottom a{color:var(--sage)}

/* phone download bar from app-bar.js, styled like the homepage dock */
#app-bar{background:rgba(12,17,14,.92)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:none!important;color:var(--parchment)!important;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px))!important;gap:12px!important}
#app-bar img{width:38px!important;height:38px!important;border-radius:10px!important}
#app-bar span{color:var(--parchment)!important;font-family:var(--f-body)}
#app-bar a{background:var(--parchment)!important;color:var(--ink)!important;font-weight:600!important}
#app-bar button{color:var(--sage)!important}
.qr-dl img{background:#fff!important}
.qr-dl span{color:var(--sage)}

/* inline-styled blocks from the old theme */
[style*="linear-gradient(150deg,#0d5c2e"]{border:1px solid rgba(168,199,155,.25)!important;border-radius:28px!important;background:radial-gradient(80% 120% at 50% 0%,rgba(168,199,155,.16),transparent 60%),var(--ink-2)!important}
[style*="linear-gradient(150deg,#0d5c2e"] p,[style*="linear-gradient(150deg,#0d5c2e"] h2,[style*="linear-gradient(150deg,#0d5c2e"] h3{color:var(--parchment)!important}
a[style*="background:var(--gold)"]{background:var(--parchment)!important;color:var(--ink)!important;border-radius:14px!important}
a[style*="background:#111"]{background:var(--ink)!important;color:var(--parchment)!important;border:1px solid rgba(255,250,243,.18)!important;border-radius:14px!important}
[style*="#E8F5E9"],[style*="#e8f5e9"]{background:var(--ink-2)!important}
[style*="background:var(--green-pale)"]{border:1px solid var(--line)}
.tap{color:var(--parchment)!important}
.topnav .sep{color:var(--sage)!important}
.wrap table{display:block;overflow-x:auto}

a.btn.alt,.btn.alt{background:var(--ink)!important;color:var(--parchment)!important;border:1px solid rgba(255,250,243,.25)!important}
a.btn.alt:hover{background:var(--ink-3)!important}
.card>.app-icon{display:block;margin-left:auto;margin-right:auto}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}