*{box-sizing:border-box}html{font-family:Arial,Tahoma,sans-serif}body{margin:0;background:#f6f7f2;color:#17362a;padding-bottom:78px}button,input,select{font:inherit}header{height:68px;background:#123c2b;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:10px}.brand>b{font-size:28px}.brand strong,.brand small{display:block}.brand small{font-size:10px;opacity:.7;margin-top:3px}header button{background:#ffffff15;color:#fff;border:0;border-radius:12px;width:40px;height:40px}.page{display:none;max-width:820px;margin:auto;padding:18px}.page.active{display:block}.hero{background:linear-gradient(135deg,#123c2b,#25684a);color:white;border-radius:26px;padding:26px;min-height:220px;display:flex;align-items:center;justify-content:space-between}.hero h1{line-height:1.8;font-size:25px}.hero p{font-size:12px;color:#d4e2d7}.hero i{font-size:85px;opacity:.2}.next{margin:-24px 14px 24px;background:#fff;border-radius:18px;padding:15px 18px;box-shadow:0 8px 25px #17362a12;display:flex;justify-content:space-between;align-items:center}.next small{display:block;color:#789087;font-size:11px}.next b{display:block;margin-top:5px}.next>strong{font-size:18px}.page>h2{font-size:18px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.grid button{border:0;background:#fff;border-radius:18px;padding:16px;text-align:right;box-shadow:0 5px 18px #17362a0a;cursor:pointer}.grid button:first-letter{font-size:24px}.grid b,.grid small{display:block}.grid b{margin-top:12px}.grid small{font-size:10px;color:#789087;margin-top:4px}article{background:#fff;border-radius:19px;padding:18px;margin-top:12px;box-shadow:0 6px 20px #17362a09}.label{font-size:13px;font-weight:bold}.label em{float:left;font-style:normal;color:#789087;font-size:10px}article p{line-height:2;font-size:18px;text-align:center}article button,.location button,.qibla button{border:0;background:#123c2b;color:#fff;border-radius:11px;padding:9px 13px}.title{display:flex;align-items:center;gap:10px;margin-bottom:16px}.title>button{border:0;background:#fff;border-radius:12px;width:42px;height:42px;box-shadow:0 4px 14px #17362a0c}.title small{font-size:10px;color:#789087}.title h1{margin:2px 0;font-size:22px}#search{width:100%;border:0;border-radius:14px;padding:14px;outline:0;box-shadow:0 5px 17px #17362a08;margin-bottom:10px}#surahs{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.surah{border:0;background:#fff;padding:14px;border-radius:15px;text-align:right;display:flex;justify-content:space-between;box-shadow:0 4px 15px #17362a08}.surah small{display:block;color:#789087;font-size:10px;margin-top:3px}.num{background:#edf3ed;border-radius:9px;padding:7px}.reader:empty{display:none}.reader{line-height:2.7}.tabs{display:flex;gap:6px}.tabs button{flex:1;border:0;padding:10px;border-radius:12px;background:#e9eee9}.tabs .on{background:#123c2b;color:#fff}.azkar-item{background:#fff;border-radius:17px;padding:16px;margin-top:10px;box-shadow:0 5px 16px #17362a08}.azkar-item p{text-align:right;font-size:16px}.counter{display:flex;justify-content:space-between;align-items:center;color:#789087;font-size:11px}.counter button{background:#edf3ed;color:#123c2b;border:0;padding:8px;border-radius:9px}.tasbeeh{background:linear-gradient(145deg,#123c2b,#28694d);color:#fff;border-radius:25px;text-align:center;padding:24px}.tasbeeh select{width:100%;padding:11px;border:0;border-radius:11px}.tasbeeh #count{font-size:80px;font-weight:bold;margin:25px}.bead{display:block;margin:auto;width:180px;height:180px;border-radius:50%;border:8px solid #ffffff1c;background:#f2f5ef;color:#123c2b;font-weight:bold}.tasbeeh>button:last-child{margin-top:15px;border:0;background:#ffffff15;color:#fff;padding:8px 14px;border-radius:10px}.location{background:#fff;border-radius:18px;padding:17px}.location small{display:block;color:#789087;margin:6px 0 13px}.location button{width:100%}#times{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:10px}.time{background:#fff;padding:17px;border-radius:15px;display:flex;justify-content:space-between}.time span{color:#789087}.qibla{text-align:center;background:#fff;padding:25px;border-radius:22px}.compass{width:230px;height:230px;border:9px solid #edf1ec;border-radius:50%;margin:10px auto 22px;display:grid;place-items:center;position:relative}.compass span{font-size:35px}.compass i{position:absolute;width:4px;height:95px;background:#a64e48;bottom:50%;left:calc(50% - 2px);transform-origin:bottom;border-radius:5px}.qibla button{margin-top:10px}nav{position:fixed;bottom:0;left:0;right:0;height:72px;background:#fff;border-top:1px solid #e6ebe6;display:grid;grid-template-columns:repeat(5,1fr);z-index:10;box-shadow:0 -5px 20px #17362a0b}nav button{border:0;background:none;color:#789087}nav button:first-child{color:#123c2b}nav small{display:block;font-size:9px;margin-top:4px}#toast{position:fixed;bottom:85px;left:50%;transform:translate(-50%,20px);background:#123c2b;color:#fff;padding:9px 15px;border-radius:20px;opacity:0;transition:.2s;z-index:20;font-size:12px}#toast.show{opacity:1;transform:translate(-50%,0)}.dark{background:#101713;color:#eef5ef}.dark article,.dark .grid button,.dark .next,.dark #search,.dark .surah,.dark .azkar-item,.dark .location,.dark .time,.dark .qibla,.dark nav,.dark .title>button{background:#18231e;color:#eef5ef}.dark .tabs button{background:#26332c;color:#ddd}.dark .tabs .on{background:#315f49}.dark #search{color:#fff}@media(max-width:600px){.grid{grid-template-columns:repeat(2,1fr)}#surahs{grid-template-columns:1fr} .hero h1{font-size:22px}.hero i{font-size:65px}}