@font-face{font-family:'Alvi Nastaleeq';src:url('../fonts/AlviNastaliq.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Amiri Quran';src:url('../fonts/AmiriQuran.ttf') format('truetype');font-display:swap}
:root{--navy:#0A1A33;--navy2:#12294d;--gold:#D4AF37;--gold-d:#b8941f;--cream:#FAF7F0;--ink:#1e2a3a;--muted:#5c6a7d;--card:#fff;--line:#e7dfc9;--radius:14px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Poppins',system-ui,sans-serif;background:var(--cream);color:var(--ink);line-height:1.65}
a{color:var(--gold-d)}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
header.site{background:var(--navy);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(10,26,51,.25)}
.hd{display:flex;align-items:center;justify-content:space-between;padding:13px 0;gap:12px;flex-wrap:wrap}
.logo{font-size:1.35rem;font-weight:700;color:#fff;text-decoration:none}
.logo span{color:var(--gold)}
.logo small{display:block;font-size:.68rem;font-weight:400;color:#c9d4e4;letter-spacing:.14em;text-transform:uppercase}
nav.main{display:flex;gap:4px;flex-wrap:wrap}
nav.main a{color:#e8edf5;text-decoration:none;font-size:.86rem;padding:7px 11px;border-radius:8px}
nav.main a:hover{background:var(--navy2);color:var(--gold)}
.hero{background:linear-gradient(160deg,var(--navy) 55%,var(--navy2));color:#fff;padding:44px 0 40px;text-align:center}
.hero .arabic-greet{font-family:'Amiri Quran',serif;font-size:2rem;color:var(--gold);line-height:2}
.hero h1{font-size:1.9rem;line-height:1.3;margin:6px 0 8px}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p{color:#c9d4e4;max-width:640px;margin:0 auto;font-size:.96rem}
.urdu-line{font-family:'Alvi Nastaleeq',serif;font-size:1.15rem;color:#e8d9a0;line-height:2.2}
.countdown{display:flex;justify-content:center;gap:10px;margin:26px auto 6px;flex-wrap:wrap}
.cd-box{background:rgba(255,255,255,.06);border:1px solid rgba(212,175,55,.45);border-radius:12px;min-width:76px;padding:12px 8px}
.cd-box b{display:block;font-size:1.8rem;color:var(--gold);line-height:1.1}
.cd-box span{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#c9d4e4}
.cd-label{color:#fff;font-weight:600;margin-top:12px}
.cd-sub{color:#9fb0c8;font-size:.85rem}
.ramadan-live{display:inline-block;background:var(--gold);color:var(--navy);font-weight:700;border-radius:999px;padding:8px 20px;margin-top:14px;font-size:1rem}
main{padding:30px 0 10px}
section.block{margin-bottom:34px}
h2.sec{font-size:1.35rem;color:var(--navy);margin-bottom:6px}
h2.sec::after{content:"";display:block;width:56px;height:3px;background:var(--gold);border-radius:2px;margin-top:6px}
.sec-sub{color:var(--muted);font-size:.92rem;margin-bottom:16px;max-width:720px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 2px 10px rgba(10,26,51,.05)}
.grid{display:grid;gap:16px}
.grid.c2{grid-template-columns:1fr}
.grid.c3{grid-template-columns:1fr}
@media(min-width:720px){.grid.c2{grid-template-columns:1fr 1fr}.grid.c3{grid-template-columns:repeat(3,1fr)}}
input[type=text]{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:.92rem;background:#fff}
label.fl{font-size:.8rem;font-weight:600;color:var(--navy);display:block;margin-bottom:5px}
.btn{display:inline-block;background:var(--navy);color:#fff;border:0;border-radius:9px;padding:11px 20px;font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--navy2)}
.btn.gold{background:var(--gold);color:var(--navy)}
.btn.gold:hover{background:var(--gold-d);color:#fff}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--navy)}
.form-row{display:grid;gap:12px;margin-bottom:14px}
@media(min-width:640px){.form-row{grid-template-columns:1fr 1fr}}
.times-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;border-bottom:2px solid var(--cream);padding-bottom:10px;margin-bottom:12px}
.times-head b{color:var(--navy);font-size:1.05rem}
.times-head span{color:var(--muted);font-size:.82rem}
.big-times{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.big-time{border-radius:12px;padding:16px;text-align:center}
.big-time.sehri{background:#eef3fb;border:1px solid #cfdcf2}
.big-time.iftar{background:#fdf6e0;border:1px solid #ecd98f}
.big-time small{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.big-time b{font-size:1.7rem;color:var(--navy)}
.big-time span{display:block;font-size:.78rem;color:var(--muted)}
table.times{width:100%;border-collapse:collapse;font-size:.92rem}
table.times td{padding:8px 6px;border-bottom:1px solid #f0ead6}
table.times td:last-child{text-align:right;font-weight:600;color:var(--navy)}
table.times tr.hl td{color:var(--gold-d);font-weight:700}
.next-line{margin-top:12px;background:var(--navy);color:#fff;border-radius:9px;padding:10px 14px;font-size:.88rem;text-align:center}
.next-line b{color:var(--gold)}
.msg{display:none;border-radius:9px;padding:11px 14px;font-size:.88rem;margin-top:12px}
.msg.err{display:block;background:#fdecec;color:#8c2323;border:1px solid #f3c2c2}
.msg.ok{display:block;background:#eaf7ec;color:#1e5c2a;border:1px solid #bfe3c6}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{border:1px solid var(--gold);color:var(--navy);background:#fff;border-radius:999px;padding:6px 14px;font-size:.82rem;cursor:pointer;font:inherit}
.chip:hover,.chip.active{background:var(--gold);color:var(--navy);font-weight:600}
.progress-wrap{background:#eee5cb;border-radius:999px;height:14px;overflow:hidden;margin:10px 0 6px}
.progress-bar{background:linear-gradient(90deg,var(--gold-d),var(--gold));height:100%;width:0;transition:width .3s}
.tracker-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px}
@media(min-width:640px){.tracker-grid{grid-template-columns:repeat(6,1fr)}}
@media(min-width:900px){.tracker-grid{grid-template-columns:repeat(10,1fr)}}
.day-cell{border:1px solid var(--line);border-radius:10px;padding:8px 4px;text-align:center;background:#fff;cursor:pointer;user-select:none}
.day-cell small{display:block;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.day-cell b{font-size:1rem;color:var(--navy)}
.day-cell input{accent-color:var(--gold-d);width:17px;height:17px;cursor:pointer}
.day-cell.done{background:#fdf6e0;border-color:var(--gold)}
.day-cell.today{outline:2px solid var(--navy)}
.dua-card .arabic{font-family:'Amiri Quran',serif;font-size:1.45rem;line-height:2.1;direction:rtl;text-align:right;color:var(--navy)}
.dua-card h3{color:var(--navy);font-size:1rem;margin-bottom:8px}
.dua-card .tr{font-style:italic;color:#44536a;font-size:.9rem;margin-top:10px}
.dua-card .meaning{font-size:.9rem;margin-top:6px}
.dua-card .ref{display:inline-block;margin-top:10px;background:var(--cream);border:1px solid var(--line);color:var(--gold-d);font-size:.75rem;font-weight:600;border-radius:999px;padding:3px 11px}
.dua-card .virtue{font-size:.84rem;color:var(--muted);margin-top:8px}
.guide-list{list-style:none}
.guide-list li{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:15px 17px;margin-bottom:12px}
.guide-list b{color:var(--navy)}
.guide-list .ref{color:var(--gold-d);font-size:.8rem;font-weight:600}
.aff-card{text-align:center}
.aff-card .ic{font-size:1.9rem}
.aff-card h3{color:var(--navy);font-size:1rem;margin:8px 0 5px}
.aff-card p{font-size:.86rem;color:var(--muted);margin-bottom:13px}
.disclosure{font-size:.78rem;color:var(--muted);background:#fff;border:1px dashed var(--gold);border-radius:9px;padding:10px 14px;margin-top:16px;text-align:center}
.prose p{margin-bottom:13px;font-size:.95rem}
.prose h3{color:var(--navy);margin:20px 0 7px;font-size:1.05rem}
.prose ul{margin:0 0 13px 20px;font-size:.95rem}
.note{font-size:.8rem;color:var(--muted)}
footer.site{background:var(--navy);color:#c9d4e4;margin-top:36px;padding:28px 0;text-align:center;font-size:.86rem}
footer.site .brand{color:#fff;font-weight:700;font-size:1.05rem}
footer.site .brand span{color:var(--gold)}
footer.site a{color:var(--gold)}
footer.site .disc{font-size:.75rem;color:#8fa2bd;max-width:640px;margin:8px auto 0}