@import"https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cairo:wght@300;400;600;700&display=swap";:root{--primary-green: #2d5a27;--secondary-green: #4a7c59;--accent-gold: #d4af37;--light-gold: #f4e4bc;--cream: #faf8f3;--dark-brown: #3c2a21;--text-dark: #2c1810;--shadow: 0 8px 32px rgba(45, 90, 39, .15);--shadow-hover: 0 12px 40px rgba(45, 90, 39, .25)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Cairo,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,var(--cream) 0%,#e8f5e8 100%);min-height:100vh;color:var(--text-dark);overflow-x:hidden}.app-container{animation:fadeInUp .8s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.zikir-button{background:linear-gradient(145deg,var(--primary-green),var(--secondary-green));color:#fff;border:none;border-radius:20px;padding:2rem 4rem;font-size:2rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow);position:relative;overflow:hidden;font-family:Cairo,sans-serif}.zikir-button:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-hover)}.zikir-button:active{transform:translateY(-2px) scale(.98)}.zikir-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.zikir-button:hover:before{left:100%}.counter{font-size:2.5rem;font-weight:700;color:var(--primary-green);margin-top:1rem;animation:pulse 2s infinite;text-shadow:0 2px 4px rgba(0,0,0,.1)}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.zikir-selector{background:#fff;border-radius:15px;padding:1.5rem;box-shadow:var(--shadow);margin-bottom:2rem;animation:slideInDown .6s ease-out}@keyframes slideInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.zikir-selector label{font-weight:600;color:var(--primary-green);margin-right:1rem;font-size:1.1rem}.zikir-selector select{font-size:1.1rem;padding:.5rem 1rem;border:2px solid var(--secondary-green);border-radius:10px;background:#fff;color:var(--text-dark);cursor:pointer;transition:all .3s ease;font-family:Cairo,sans-serif}.zikir-selector select:hover{border-color:var(--accent-gold);transform:translateY(-2px)}.ayet-box{background:linear-gradient(145deg,white,var(--light-gold));border:2px solid var(--accent-gold);border-radius:20px;padding:2rem;max-width:400px;box-shadow:var(--shadow);animation:slideInRight .8s ease-out;position:relative}@keyframes slideInRight{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}.ayet-box:before{content:"☪";position:absolute;top:-10px;right:-10px;font-size:2rem;color:var(--accent-gold);background:#fff;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 8px #0000001a}.ayet-title{font-weight:700;color:var(--primary-green);margin-bottom:1rem;font-size:1.2rem;text-align:center}.ayet-arabic{font-family:Amiri,serif;font-size:1.5rem;margin-bottom:1rem;text-align:center;direction:rtl;color:var(--dark-brown);line-height:1.8}.ayet-meal{font-size:1rem;color:var(--text-dark);margin-bottom:1.5rem;line-height:1.6;text-align:center}.zikir-meal{background:linear-gradient(90deg,#f4e4bc,#fffbe6);border-radius:10px;padding:.8rem 1.2rem;color:var(--primary-green);font-weight:500;font-size:1.05rem;text-align:center;margin-bottom:1rem;box-shadow:0 2px 8px #2d5a2712;transition:background .3s}@media (max-width: 768px){.zikir-meal{font-size:.98rem;padding:.7rem}}.audio-buttons{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.audio-button{background:linear-gradient(145deg,var(--secondary-green),var(--primary-green));color:#fff;border:none;border-radius:25px;padding:.5rem 1rem;font-size:.9rem;cursor:pointer;transition:all .3s ease;font-family:Cairo,sans-serif;font-weight:500}.audio-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #2d5a274d}.audio-button:active{transform:translateY(0)}.new-ayet-button{background:linear-gradient(145deg,var(--accent-gold),#b8941f);color:#fff;border:none;border-radius:15px;padding:.8rem 1.5rem;font-size:1rem;cursor:pointer;transition:all .3s ease;font-family:Cairo,sans-serif;font-weight:600;margin-top:1.5rem}.new-ayet-button:hover{transform:translateY(-3px);box-shadow:0 6px 20px #d4af3766}@media (max-width: 768px){.zikir-button{padding:1.5rem 3rem;font-size:1.5rem}.counter{font-size:2rem}.ayet-box{max-width:100%;margin:1rem}.audio-buttons{flex-direction:column}}.loading{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.fade-in{animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 600px){.app-container{flex-direction:column!important}.main-content,.side-panel{width:100%!important;max-width:100vw!important}.ayet-box{margin-left:auto!important;margin-right:auto!important;left:0!important;right:0!important;float:none!important;width:95vw!important;max-width:99vw!important;display:block!important}.new-ayet-button{display:block!important;margin:1.2rem auto .7rem!important;left:0!important;right:0!important;float:none!important;position:relative!important;z-index:2!important}.info-box{bottom:120px!important;left:50%!important;transform:translate(-50%)!important;max-width:95vw!important;z-index:1001!important}.audio-buttons{margin-bottom:1.2rem!important}.zikir-button,.counter,.reset-button,.reset-all-button{margin-bottom:1rem!important}.bookmark-fixed,.info-box{display:none!important}}