body{background-color:var(--bg);background-image:linear-gradient(110deg,rgba(6,23,18,.97) 0%,rgba(6,23,18,.91) 43%,rgba(6,23,18,.72) 100%),url('assets/hajj-background-v2.png');background-size:cover;background-position:center;background-attachment:fixed}
body[data-theme="ivory"]{background-image:linear-gradient(110deg,rgba(243,239,229,.97) 0%,rgba(243,239,229,.91) 48%,rgba(243,239,229,.78) 100%),url('assets/hajj-background-v2.png')}
body[data-theme="midnight"]{background-image:linear-gradient(110deg,rgba(7,13,24,.97) 0%,rgba(7,13,24,.90) 45%,rgba(7,13,24,.70) 100%),url('assets/hajj-background-v2.png')}
body[data-theme="contrast"]{background-image:linear-gradient(110deg,rgba(0,0,0,.99),rgba(0,0,0,.87)),url('assets/hajj-background-v2.png')}
.hero{background-image:linear-gradient(115deg,rgba(7,38,29,.97) 0%,rgba(7,38,29,.85) 52%,rgba(7,38,29,.55) 100%),url('assets/hajj-background-v2.png');background-size:cover;background-position:center 48%}
body[data-theme="ivory"] .hero{background-image:linear-gradient(115deg,rgba(255,253,247,.97) 0%,rgba(255,253,247,.87) 55%,rgba(255,253,247,.66) 100%),url('assets/hajj-background-v2.png')}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.compact-hero h2{font-size:clamp(2rem,4vw,3.8rem)}
.progress-track>span.p-0{width:0}.progress-track>span.p-5{width:5%}.progress-track>span.p-10{width:10%}.progress-track>span.p-15{width:15%}.progress-track>span.p-20{width:20%}.progress-track>span.p-25{width:25%}.progress-track>span.p-30{width:30%}.progress-track>span.p-35{width:35%}.progress-track>span.p-40{width:40%}.progress-track>span.p-45{width:45%}.progress-track>span.p-50{width:50%}.progress-track>span.p-55{width:55%}.progress-track>span.p-60{width:60%}.progress-track>span.p-65{width:65%}.progress-track>span.p-70{width:70%}.progress-track>span.p-75{width:75%}.progress-track>span.p-80{width:80%}.progress-track>span.p-85{width:85%}.progress-track>span.p-90{width:90%}.progress-track>span.p-95{width:95%}.progress-track>span.p-100{width:100%}
@media(max-width:720px){body{background-position:58% center;background-attachment:scroll}.hero{background-position:62% center}}
@media(prefers-reduced-data:reduce){body,.hero{background-image:none}}
.reunion-card{background:#f8f3e7;color:#083c31;border-radius:22px;padding:28px 26px;border:2px solid #c9b27a}
.reunion-card header{display:flex;justify-content:space-between;align-items:baseline;letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;font-weight:800;color:#8a6d2b;margin-bottom:10px}
.reunion-card h3{font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 18px;line-height:1.1;color:#083c31}
.reunion-card dl{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin:0}
.reunion-card dt{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#6d7f76;margin-bottom:4px}
.reunion-card dd{margin:0;font-size:1.05rem;font-weight:700;line-height:1.3}
.reunion-note{margin:22px 0 0;font-size:.78rem;color:#6d7f76}
@media(max-width:640px){.reunion-card dl{grid-template-columns:1fr}}
@media print{
  html.printing-reunion body *{visibility:hidden}
  html.printing-reunion #reunion-card,html.printing-reunion #reunion-card *{visibility:visible}
  html.printing-reunion #reunion-card{position:absolute;inset:24px;box-shadow:none}
}

.brand-mark::after{content:"";position:absolute;inset:-1px;border-radius:16px;pointer-events:none;box-shadow:0 0 18px color-mix(in srgb,var(--gold) 28%,transparent);animation:hajwa-mark-glow 4.8s ease-in-out infinite}
.nav-btn,.quick-action,.card.interactive,.btn,.tool-card{transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease,background-color .22s ease,box-shadow .22s ease}
.hero{animation:hajwa-hero-in .7s cubic-bezier(.22,1,.36,1) both}
.topbar{transition:background .25s ease,box-shadow .25s ease}
.status-dot{animation:hajwa-pulse 2.4s ease-in-out infinite}
.view-enter .card,.view-enter .hero,.view-enter .journey-item,.view-enter .quick-action{animation:hajwa-rise .55s cubic-bezier(.22,1,.36,1) both}
.view-enter .card:nth-child(2),.view-enter .journey-item:nth-child(2){animation-delay:.05s}
.view-enter .card:nth-child(3),.view-enter .journey-item:nth-child(3){animation-delay:.1s}
.modal-backdrop{animation:hajwa-fade .22s ease}
.btn:active{transform:scale(.98)}
.search-result{display:block;text-decoration:none}
@keyframes hajwa-mark-glow{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes hajwa-hero-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes hajwa-pulse{0%,100%{box-shadow:0 0 10px var(--ok)}50%{box-shadow:0 0 18px var(--ok)}}
@keyframes hajwa-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hajwa-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.brand-mark::after,.hero,.status-dot,.view-enter .card,.view-enter .hero,.view-enter .journey-item,.view-enter .quick-action,.modal-backdrop{animation:none!important}}

.fiqh-panel{padding:16px;border:1px solid color-mix(in srgb,var(--gold) 22%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--gold) 6%,var(--surface))}
.fiqh-panel h3{margin:6px 0 8px}
.install-steps{margin:14px 0;padding-inline-start:22px;display:grid;gap:8px;color:var(--text);line-height:1.5}
.install-steps li{padding-inline-start:4px}
body.hajwa-standalone{padding-top:env(safe-area-inset-top)}
body.hajwa-standalone .topbar{padding-top:max(0px,env(safe-area-inset-top))}
body.hajwa-standalone .mobile-nav{bottom:max(10px,env(safe-area-inset-bottom))}
body.hajwa-standalone .app-footer{padding-bottom:max(28px,env(safe-area-inset-bottom))}
@media (display-mode: standalone),(display-mode: fullscreen),(display-mode: minimal-ui){
  body.hajwa-standalone #install-btn{display:none!important}
}
.hajwa-gl{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.55;mix-blend-mode:screen}
body[data-theme="ivory"] .hajwa-gl{mix-blend-mode:multiply;opacity:.2}
#app-shell,.offline-banner,.skip-link,#hajwa-splash{position:relative;z-index:1}
.setting-row .select{max-width:min(240px,46vw)}
@media(max-width:720px){.setting-row{flex-wrap:wrap}.setting-row .select,.setting-row .btn{max-width:100%;width:100%}}