/*
Theme Name: Quran App
Theme URI: https://onlinequrantilawat.com
Author: Quran App Team
Description: A dedicated Quran reading application with Indo-Pak Nastaleeq script, Tajweed, audio, and translation. Optimized for mobile and desktop reading.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: quran-app
*/

/* Premium UI system (shared with static demo pages) */
*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,sans-serif;overflow-x:hidden;background:#F5F1EB;color:#0f172a}
.dark body{background:#0f172a;color:#e2e8f0}
.glass{background:rgba(255,255,255,0.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.15)}
.dark .glass{background:rgba(15,23,42,0.7);border:1px solid rgba(255,255,255,0.08)}
.card-3d{transition:all 0.4s cubic-bezier(0.4,0,0.2,1);transform-style:preserve-3d}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(3deg)}}
@keyframes floatSlow{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(15px) rotate(-2deg)}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 20px rgba(21,128,61,0.3)}50%{box-shadow:0 0 40px rgba(21,128,61,0.6)}}
@keyframes spin-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes countUp{from{opacity:0;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}
.reveal{opacity:0;transform:translateY(50px);transition:all 0.8s cubic-bezier(0.4,0,0.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:0.1s}
.reveal-delay-2{transition-delay:0.2s}
.reveal-delay-3{transition-delay:0.3s}
.reveal-delay-4{transition-delay:0.4s}
.reveal-delay-5{transition-delay:0.5s}
.hero-gradient{background:linear-gradient(135deg,#14532d 0%,#15803d 30%,#166534 60%,#0f4c2e 100%);position:relative;isolation:isolate}
.hero-gradient::before{content:'';position:absolute;inset:-2px;background:radial-gradient(900px 520px at 15% 20%,rgba(251,191,36,0.22),transparent 60%),radial-gradient(820px 520px at 85% 30%,rgba(74,222,128,0.18),transparent 62%),radial-gradient(900px 620px at 50% 80%,rgba(129,140,248,0.12),transparent 65%),linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0));z-index:-1;pointer-events:none}
.hero-gradient::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.08) 1px,transparent 1px);background-size:22px 22px;opacity:0.08;mix-blend-mode:overlay;z-index:-1;pointer-events:none}
.dark .hero-gradient::after{opacity:0.06}
.animated-gradient{background-size:200% 200%;animation:gradientShift 8s ease infinite}
.floating-shape{position:absolute;pointer-events:none;opacity:0.15}
.dark .floating-shape{opacity:0.08}
.float-1{animation:float 6s ease-in-out infinite;top:10%;left:5%}
.float-2{animation:floatSlow 8s ease-in-out infinite;top:60%;right:8%}
.float-3{animation:float 7s ease-in-out infinite 1s;bottom:15%;left:15%}
.float-4{animation:floatSlow 9s ease-in-out infinite 0.5s;top:30%;right:20%}
.float-5{animation:spin-slow 20s linear infinite;top:20%;right:5%}
.float-6{animation:float 5s ease-in-out infinite 2s;bottom:30%;right:30%}
.nav-glass{background:rgba(255,255,255,0.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,0.2)}
.dark .nav-glass{background:rgba(15,23,42,0.88);border-bottom:1px solid rgba(255,255,255,0.06)}
.nav-glass{box-shadow:0 18px 45px rgba(2,6,23,0.08)}
.dark .nav-glass{box-shadow:0 18px 55px rgba(0,0,0,0.35)}
.btn-primary{background:linear-gradient(135deg,#15803d,#16a34a);transition:all 0.3s ease;box-shadow:0 4px 15px rgba(21,128,61,0.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(21,128,61,0.4)}
.btn-primary:active{transform:translateY(0);box-shadow:0 6px 18px rgba(21,128,61,0.35)}
.btn-primary:focus-visible{outline:3px solid rgba(74,222,128,0.45);outline-offset:3px}
.btn-secondary{background:rgba(255,255,255,0.1);border:2px solid rgba(255,255,255,0.3);backdrop-filter:blur(10px);transition:all 0.3s ease}
.btn-secondary:hover{background:rgba(255,255,255,0.2);transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.2)}
.dark .btn-secondary{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.15)}
.section-light{background:#EAE6E0;color:#0f172a}
.dark .section-light{background:#0f172a;color:#e2e8f0}
.section-white{background:#F5F1EB;color:#0f172a}
.dark .section-white{background:#1e293b;color:#e2e8f0}
.surah-card{transition:all 0.4s cubic-bezier(0.4,0,0.2,1);transform-style:preserve-3d}
.surah-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 40px rgba(0,0,0,0.15)}
.stat-number{font-variant-numeric:tabular-nums}
.faq-content{max-height:0;overflow:hidden;transition:max-height 0.5s cubic-bezier(0.4,0,0.2,1)}
.faq-content.open{max-height:500px}
.perspective-container{perspective:1200px}
.hero-3d{transform:rotateX(2deg);transform-style:preserve-3d;transition:transform 0.6s ease}
.hero-3d:hover{transform:rotateX(0deg)}
.glow-text{text-shadow:0 0 40px rgba(21,128,61,0.3)}
.dark .glow-text{text-shadow:0 0 40px rgba(74,222,128,0.2)}
.gradient-text{background:linear-gradient(135deg,#15803d,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.dark .gradient-text{background:linear-gradient(135deg,#4ade80,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.step-line{position:absolute;top:40px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#15803d,transparent)}
.dark .step-line{background:linear-gradient(90deg,transparent,#4ade80,transparent)}
.feature-card-1:hover{border-color:#22c55e;box-shadow:0 20px 40px rgba(34,197,94,0.15)}
.feature-card-2:hover{border-color:#6366f1;box-shadow:0 20px 40px rgba(99,102,241,0.15)}
.feature-card-3:hover{border-color:#a855f7;box-shadow:0 20px 40px rgba(168,85,247,0.15)}
.feature-card-4:hover{border-color:#f59e0b;box-shadow:0 20px 40px rgba(245,158,11,0.15)}
.feature-card-5:hover{border-color:#14b8a6;box-shadow:0 20px 40px rgba(20,184,166,0.15)}
.feature-card-6:hover{border-color:#f43f5e;box-shadow:0 20px 40px rgba(244,63,94,0.15)}
.feature-card-1 .feature-icon{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803d}
.feature-card-2 .feature-icon{background:linear-gradient(135deg,#e0e7ff,#c7d2fe);color:#4f46e5}
.feature-card-3 .feature-icon{background:linear-gradient(135deg,#f3e8ff,#e9d5ff);color:#7c3aed}
.feature-card-4 .feature-icon{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#d97706}
.feature-card-5 .feature-icon{background:linear-gradient(135deg,#ccfbf1,#99f6e4);color:#0d9488}
.feature-card-6 .feature-icon{background:linear-gradient(135deg,#ffe4e6,#fecdd3);color:#e11d48}
.dark .feature-card-1:hover{border-color:#4ade80;box-shadow:0 20px 40px rgba(74,222,128,0.1)}
.dark .feature-card-2:hover{border-color:#818cf8;box-shadow:0 20px 40px rgba(129,140,248,0.1)}
.dark .feature-card-3:hover{border-color:#c084fc;box-shadow:0 20px 40px rgba(192,132,252,0.1)}
.dark .feature-card-4:hover{border-color:#fbbf24;box-shadow:0 20px 40px rgba(251,191,36,0.1)}
.dark .feature-card-5:hover{border-color:#2dd4bf;box-shadow:0 20px 40px rgba(45,212,191,0.1)}
.dark .feature-card-6:hover{border-color:#fb7185;box-shadow:0 20px 40px rgba(251,113,133,0.1)}
.dark .feature-card-1 .feature-icon{background:linear-gradient(135deg,rgba(34,197,94,0.2),rgba(22,163,74,0.2))}
.dark .feature-card-2 .feature-icon{background:linear-gradient(135deg,rgba(99,102,241,0.2),rgba(79,70,229,0.2))}
.dark .feature-card-3 .feature-icon{background:linear-gradient(135deg,rgba(168,85,247,0.2),rgba(124,58,237,0.2))}
.dark .feature-card-4 .feature-icon{background:linear-gradient(135deg,rgba(245,158,11,0.2),rgba(217,119,6,0.2))}
.dark .feature-card-5 .feature-icon{background:linear-gradient(135deg,rgba(20,184,166,0.2),rgba(13,148,136,0.2))}
.dark .feature-card-6 .feature-icon{background:linear-gradient(135deg,rgba(244,63,94,0.2),rgba(225,29,72,0.2))}
@keyframes heroParticle{0%{transform:translate(0,0) scale(1);opacity:0.6}50%{opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}
.hero-particle{position:absolute;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.4);animation:heroParticle var(--duration) ease-in-out infinite;animation-delay:var(--delay)}
.btn-shimmer{position:relative;overflow:hidden}
.btn-shimmer::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,0.3) 50%,transparent 60%);animation:btnShimmer 3s ease-in-out infinite}
@keyframes btnShimmer{0%{transform:translateX(-100%) rotate(45deg)}100%{transform:translateX(100%) rotate(45deg)}}
.btn-shimmer:focus-visible{outline:3px solid rgba(251,191,36,0.4);outline-offset:4px}
.stat-card-1{background:linear-gradient(135deg,#E0EFE2,#D0E8D3);border-left:4px solid #15803d}
.stat-card-2{background:linear-gradient(135deg,#eff6ff,#dbeafe);border-left:4px solid #2563eb}
.stat-card-3{background:linear-gradient(135deg,#F5EDDA,#E8D580);border-left:4px solid #f59e0b}
.stat-card-4{background:linear-gradient(135deg,#f3e8ff,#e9d5ff);border-left:4px solid #a855f7}
.dark .stat-card-1{background:linear-gradient(135deg,rgba(34,197,94,0.15),rgba(22,163,74,0.1))}
.dark .stat-card-2{background:linear-gradient(135deg,rgba(37,99,235,0.15),rgba(29,78,216,0.1))}
.dark .stat-card-3{background:linear-gradient(135deg,rgba(245,158,11,0.15),rgba(217,119,6,0.1))}
.dark .stat-card-4{background:linear-gradient(135deg,rgba(168,85,247,0.15),rgba(124,58,237,0.1))}
.text-tajweed-ghunnah{color:#16a34a}
.text-tajweed-ikhfa{color:#2563eb}
.text-tajweed-iqlab{color:#7c3aed}
.text-tajweed-idghaam{color:#dc2626}
.text-tajweed-qalqalah{color:#ea580c}
.text-tajweed-madda{color:#ca8a04}
.text-tajweed-sukoon{color:#4f46e5}
.surah-highlight-1{border-color:#22c55e;background:linear-gradient(135deg,#E0EFE2,#DDF0DF)}
.surah-highlight-2{border-color:#6366f1;background:linear-gradient(135deg,#eef2ff,#e0e7ff)}
.surah-highlight-3{border-color:#f59e0b;background:linear-gradient(135deg,#F5EDDA,#F0E4AA)}
.surah-highlight-4{border-color:#a855f7;background:linear-gradient(135deg,#faf5ff,#f3e8ff)}
.surah-highlight-5{border-color:#14b8a6;background:linear-gradient(135deg,#f0fdfa,#ccfbf1)}
.surah-highlight-6{border-color:#f43f5e;background:linear-gradient(135deg,#fff1f2,#ffe4e6)}
.dark .surah-highlight-1{background:linear-gradient(135deg,rgba(34,197,94,0.1),rgba(22,163,74,0.05));border-color:rgba(34,197,94,0.3)}
.dark .surah-highlight-2{background:linear-gradient(135deg,rgba(99,102,241,0.1),rgba(79,70,229,0.05));border-color:rgba(99,102,241,0.3)}
.dark .surah-highlight-3{background:linear-gradient(135deg,rgba(245,158,11,0.1),rgba(217,119,6,0.05));border-color:rgba(245,158,11,0.3)}
.dark .surah-highlight-4{background:linear-gradient(135deg,rgba(168,85,247,0.1),rgba(124,58,237,0.05));border-color:rgba(168,85,247,0.3)}
.dark .surah-highlight-5{background:linear-gradient(135deg,rgba(20,184,166,0.1),rgba(13,148,136,0.05));border-color:rgba(20,184,166,0.3)}
.dark .surah-highlight-6{background:linear-gradient(135deg,rgba(244,63,94,0.1),rgba(225,29,72,0.05));border-color:rgba(244,63,94,0.3)}
.step-circle-1{background:linear-gradient(135deg,#15803d,#22c55e)}
.step-circle-2{background:linear-gradient(135deg,#2563eb,#6366f1)}
.step-circle-3{background:linear-gradient(135deg,#f59e0b,#f97316)}

@media (max-width: 768px){body{font-size:16px}}
@media (min-width: 769px){body{font-size:18px}}
@media (prefers-reduced-motion: reduce){.animated-gradient{animation:none}.btn-shimmer::after{animation:none}}
@media print{body{background:white;color:black}.no-print{display:none}}

/* ===== FEATURE 7: COLOR THEMES ===== */
body[data-theme="sepia"]{background:#f4ecd8!important;color:#5c4b37!important}
body[data-theme="sepia"] .section-light{background:#e8dbc8!important;color:#5c4b37!important}
body[data-theme="sepia"] .section-white{background:#f4ecd8!important;color:#5c4b37!important}
body[data-theme="sepia"] .glass{background:rgba(244,236,216,0.88)!important;border-color:rgba(180,83,9,0.18)!important}
body[data-theme="sepia"] .nav-glass{background:rgba(244,236,216,0.95)!important}
.theme-picker-wrap{position:relative}
.theme-picker-dropdown{position:absolute;right:0;top:calc(100% + 10px);background:white;border:1px solid #e5e7eb;border-radius:16px;padding:8px;min-width:190px;box-shadow:0 8px 30px rgba(0,0,0,0.14);z-index:200;display:none;animation:fadeInDown 0.18s ease}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.dark .theme-picker-dropdown{background:#1e293b;border-color:#334155;box-shadow:0 8px 30px rgba(0,0,0,0.4)}
body[data-theme="sepia"] .theme-picker-dropdown{background:#f4ecd8;border-color:rgba(180,83,9,0.2)}
.theme-picker-dropdown.open{display:block}
.theme-swatch{width:16px;height:16px;border-radius:50%;border:2px solid rgba(0,0,0,0.1);flex-shrink:0}
.theme-option{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:10px;cursor:pointer;transition:background 0.15s;font-size:13px;font-weight:500;border:none;background:transparent;width:100%;text-align:left;color:inherit}
.theme-option:hover{background:rgba(34,197,94,0.08)}
.theme-option.active{background:rgba(34,197,94,0.1);color:#15803d;font-weight:700}
.dark .theme-option.active{background:rgba(34,197,94,0.14);color:#4ade80}
body[data-theme="sepia"] .theme-option.active{background:rgba(180,83,9,0.1);color:#b45309}
.theme-check{opacity:0;margin-left:auto;color:#15803d;font-size:14px}
.theme-option.active .theme-check{opacity:1}

/* ===== FEATURE 2: STREAK ===== */
.streak-badge-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:20px;font-size:13px;font-weight:700;cursor:pointer;border:none;background:rgba(245,158,11,0.13);color:#b45309;transition:all 0.2s}
.streak-badge-btn:hover{background:rgba(245,158,11,0.22);transform:scale(1.04)}
.dark .streak-badge-btn{background:rgba(245,158,11,0.18);color:#fbbf24}
.streak-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.52);z-index:400;display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}
.streak-modal-overlay.open{display:flex}
.streak-modal{background:white;border-radius:24px;padding:28px;max-width:440px;width:100%;box-shadow:0 25px 60px rgba(0,0,0,0.22);max-height:88vh;overflow-y:auto}
.dark .streak-modal,.dark .streak-modal *{background-color:inherit}
.dark .streak-modal{background:#1e293b;color:#e2e8f0}
body[data-theme="sepia"] .streak-modal{background:#f4ecd8;color:#5c4b37}
.streak-heatmap{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin-top:8px}
.streak-day{aspect-ratio:1;border-radius:3px;background:#e5e7eb}
.dark .streak-day{background:#334155}
.streak-day.read-day{background:linear-gradient(135deg,#15803d,#22c55e)}
.streak-day.today-day{outline:2px solid #f59e0b}
.goal-bar-track{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden}
.dark .goal-bar-track{background:#334155}
.goal-bar-fill{height:100%;background:linear-gradient(90deg,#15803d,#22c55e);border-radius:4px;transition:width 0.5s ease}

/* ===== FEATURE 3: PRAYER TIMES ===== */
.prayer-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:12px;transition:all 0.2s;border:1px solid transparent}
.prayer-row.next-prayer{background:linear-gradient(135deg,rgba(21,128,61,0.08),rgba(245,158,11,0.06));border-color:rgba(21,128,61,0.3)!important}
.prayer-row.current-prayer{background:linear-gradient(135deg,rgba(21,128,61,0.15),rgba(245,158,11,0.1));border-color:rgba(21,128,61,0.5)!important}
.dark .prayer-row.next-prayer{background:linear-gradient(135deg,rgba(34,197,94,0.1),rgba(245,158,11,0.07));border-color:rgba(34,197,94,0.25)!important}
.dark .prayer-row.current-prayer{background:linear-gradient(135deg,rgba(34,197,94,0.15),rgba(245,158,11,0.1));border-color:rgba(34,197,94,0.35)!important}
.toggle-switch{position:relative;display:inline-block;width:42px;height:23px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-track{position:absolute;cursor:pointer;inset:0;background:#cbd5e1;border-radius:23px;transition:0.3s}
.toggle-track::before{content:'';position:absolute;height:17px;width:17px;left:3px;bottom:3px;background:white;border-radius:50%;transition:0.3s;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
input:checked + .toggle-track{background:#15803d}
input:checked + .toggle-track::before{transform:translateX(19px)}

/* ===== FEATURE 5: SHARE MODAL ===== */
.share-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.58);z-index:500;display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(6px)}
.share-modal-overlay.open{display:flex}
.share-modal{background:white;border-radius:24px;padding:24px;max-width:520px;width:100%;box-shadow:0 25px 60px rgba(0,0,0,0.25);max-height:90vh;overflow-y:auto}
.dark .share-modal{background:#1e293b;color:#e2e8f0}
body[data-theme="sepia"] .share-modal{background:#f4ecd8;color:#5c4b37}
.share-theme-btn{padding:5px 13px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:2px solid transparent;transition:all 0.2s;background:#f1f5f9;color:#475569}
.share-theme-btn.active{border-color:#15803d;background:rgba(21,128,61,0.1);color:#15803d}
.dark .share-theme-btn{background:#334155;color:#94a3b8}
.dark .share-theme-btn.active{border-color:#22c55e;background:rgba(34,197,94,0.15);color:#22c55e}

/* ===== FEATURE 6: HISNUL MUSLIM ===== */
.hm-category-btn{display:block;width:100%;text-align:left;padding:9px 14px;border-radius:11px;font-size:14px;font-weight:500;cursor:pointer;border:none;background:transparent;transition:all 0.2s;color:inherit}
.hm-category-btn:hover{background:rgba(34,197,94,0.08)}
.hm-category-btn.active{background:linear-gradient(135deg,rgba(21,128,61,0.12),rgba(22,163,74,0.07));color:#15803d;font-weight:700}
.dark .hm-category-btn.active{background:linear-gradient(135deg,rgba(34,197,94,0.15),rgba(22,163,74,0.1));color:#4ade80}
.hm-dua-card{border-radius:16px;padding:20px;border:1px solid rgba(22,163,74,0.1);transition:all 0.3s}
.hm-dua-card:hover{border-color:rgba(22,163,74,0.28);box-shadow:0 4px 20px rgba(22,163,74,0.07)}
.dark .hm-dua-card{border-color:rgba(34,197,94,0.12)}
.dark .hm-dua-card:hover{border-color:rgba(34,197,94,0.25)}

/* ===== TOAST ===== */
.toast-notif{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(90px);z-index:600;background:#15803d;color:white;padding:11px 22px;border-radius:100px;font-weight:600;font-size:13px;box-shadow:0 4px 20px rgba(21,128,61,0.38);transition:transform 0.32s cubic-bezier(0.34,1.56,0.64,1);white-space:nowrap;pointer-events:none}
.toast-notif.show{transform:translateX(-50%) translateY(0)}

/* ===== HIJRI DATE STRIP ===== */
.hijri-strip{text-align:center;padding:6px 16px;font-size:12px;font-weight:500;background:rgba(21,128,61,0.06);border-bottom:1px solid rgba(21,128,61,0.1);color:#166534;letter-spacing:0.02em}
.dark .hijri-strip{background:rgba(34,197,94,0.06);border-bottom-color:rgba(34,197,94,0.1);color:#4ade80}
body[data-theme="sepia"] .hijri-strip{background:rgba(180,83,9,0.06);border-bottom-color:rgba(180,83,9,0.12);color:#92400e}

@media print{body{background:white;color:black}.no-print{display:none}}