@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap";
:root{--bg-primary:#0a0f1a;--bg-secondary:#111827;--bg-card:#111827cc;--bg-glass:#ffffff0a;--bg-glass-hover:#ffffff14;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--text-accent:#a7f3d0;--accent-green:#10b981;--accent-green-glow:#10b98140;--accent-gold:#f59e0b;--accent-gold-glow:#f59e0b33;--accent-blue:#3b82f6;--accent-purple:#8b5cf6;--border-subtle:#ffffff0f;--border-card:#ffffff14;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 20px #0006;--shadow-lg:0 10px 40px #00000080;--shadow-glow-green:0 0 30px #10b98126;--shadow-glow-gold:0 0 30px #f59e0b26;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-full:9999px;--font-arabic:"Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;--font-latin:"Inter","Segoe UI",sans-serif;--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-smooth:.4s cubic-bezier(.25,.46,.45,.94)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-arabic);background:var(--bg-primary);color:var(--text-primary);direction:rtl;min-height:100vh;line-height:1.7;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(80% 50% at 50% -20%,#10b98114,#0000),radial-gradient(60% 40% at 80% 80%,#8b5cf60d,#0000);width:100%;height:100%;position:fixed;top:0;left:0}a{color:var(--accent-green);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--text-accent)}.app-container{z-index:1;max-width:480px;min-height:100vh;margin:0 auto;padding:16px;position:relative}.app-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;margin-bottom:24px;padding:16px 0 24px;display:flex}.app-logo{align-items:center;gap:10px;display:flex}.app-logo-icon{background:linear-gradient(135deg,var(--accent-green),#059669);border-radius:var(--radius-sm);width:36px;height:36px;box-shadow:var(--shadow-glow-green);justify-content:center;align-items:center;font-size:18px;display:flex}.app-logo-text{background:linear-gradient(135deg,var(--accent-green),var(--text-accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:22px;font-weight:700}.header-stats{align-items:center;gap:16px;display:flex}.stat-badge{background:var(--bg-glass);border:1px solid var(--border-card);border-radius:var(--radius-full);color:var(--text-secondary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all var(--transition-normal);align-items:center;gap:6px;padding:6px 14px;font-size:13px;display:flex}.stat-badge:hover{background:var(--bg-glass-hover);border-color:var(--accent-green)}.stat-badge .icon{font-size:16px}.stat-badge .value{color:var(--text-primary);font-weight:600;font-family:var(--font-latin)}.feed-container{flex-direction:column;gap:20px;display:flex}.feed-card{background:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:all var(--transition-smooth);padding:28px 24px;animation:.5s ease-out both cardSlideIn;position:relative;overflow:hidden}.feed-card:before{content:"";background:linear-gradient(180deg,var(--accent-green),transparent);border-radius:0 var(--radius-lg)var(--radius-lg)0;opacity:0;width:4px;height:100%;transition:opacity var(--transition-normal);position:absolute;top:0;right:0}.feed-card:hover{box-shadow:var(--shadow-glow-green);border-color:#10b98133;transform:translateY(-2px)}.feed-card:hover:before{opacity:1}.feed-card:first-child{animation-delay:0s}.feed-card:nth-child(2){animation-delay:80ms}.feed-card:nth-child(3){animation-delay:.16s}.feed-card:nth-child(4){animation-delay:.24s}.feed-card:nth-child(5){animation-delay:.32s}.card-type-badge{border-radius:var(--radius-full);letter-spacing:.3px;align-items:center;gap:5px;margin-bottom:16px;padding:4px 12px;font-size:11px;font-weight:600;display:inline-flex}.card-type-badge.ayah{color:var(--accent-green);background:#10b9811f;border:1px solid #10b98133}.card-type-badge.hadith{color:var(--accent-gold);background:#f59e0b1f;border:1px solid #f59e0b33}.card-type-badge.reflection{color:var(--accent-purple);background:#8b5cf61f;border:1px solid #8b5cf633}.card-content{color:var(--text-primary);margin-bottom:12px;font-size:20px;font-weight:500;line-height:1.9}.card-source{color:var(--text-muted);align-items:center;gap:6px;margin-bottom:20px;font-size:13px;display:flex}.card-prompt{color:var(--text-secondary);margin-bottom:14px;font-size:15px;font-weight:400}.card-options{flex-wrap:wrap;gap:10px;display:flex}.card-option-btn{border:1px solid var(--border-card);border-radius:var(--radius-full);background:var(--bg-glass);color:var(--text-secondary);font-family:var(--font-arabic);cursor:pointer;transition:all var(--transition-normal);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:10px 20px;font-size:14px}.card-option-btn:hover{border-color:var(--accent-green);color:var(--accent-green);background:#10b9811f;transform:scale(1.03)}.card-option-btn.selected{border-color:var(--accent-green);color:var(--accent-green);box-shadow:var(--shadow-glow-green);background:#10b98126}.xp-toast{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--radius-full);color:var(--accent-green);z-index:1000;pointer-events:none;background:#10b98126;border:1px solid #10b9814d;padding:10px 24px;font-size:14px;font-weight:600;animation:.4s ease-out forwards toastIn;position:fixed;top:20px;left:50%;transform:translate(-50%)translateY(-100px)}.xp-toast.hide{animation:.3s ease-in forwards toastOut}.intent-prompt{border-radius:var(--radius-lg);background:linear-gradient(135deg,#8b5cf614,#10b98114);border:1px solid #8b5cf626;margin-top:8px;padding:24px;animation:.4s ease-out both fadeIn}.intent-prompt-label{color:var(--accent-purple);align-items:center;gap:6px;margin-bottom:10px;font-size:13px;font-weight:600;display:flex}.intent-prompt-text{color:var(--text-primary);margin-bottom:16px;font-size:17px;line-height:1.8}.intent-actions{gap:10px;display:flex}.btn-intent-accept{border-radius:var(--radius-full);background:linear-gradient(135deg,var(--accent-green),#059669);color:#fff;font-family:var(--font-arabic);cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-glow-green);border:none;padding:8px 20px;font-size:14px;font-weight:600}.btn-intent-accept:hover{transform:scale(1.05);box-shadow:0 0 40px #10b9814d}.btn-intent-skip{border-radius:var(--radius-full);border:1px solid var(--border-card);color:var(--text-muted);font-family:var(--font-arabic);cursor:pointer;transition:all var(--transition-normal);background:0 0;padding:8px 20px;font-size:14px}.btn-intent-skip:hover{border-color:var(--text-muted);color:var(--text-secondary)}.challenge-section{margin-top:32px}.section-title{color:var(--text-primary);align-items:center;gap:8px;margin-bottom:16px;font-size:18px;font-weight:600;display:flex}.challenge-card{border-radius:var(--radius-lg);transition:all var(--transition-smooth);background:linear-gradient(135deg,#f59e0b0f,#10b9810f);border:1px solid #f59e0b26;padding:24px}.challenge-card:hover{box-shadow:var(--shadow-glow-gold);border-color:#f59e0b4d}.challenge-title{margin-bottom:8px;font-size:17px;font-weight:600}.challenge-desc{color:var(--text-secondary);margin-bottom:16px;font-size:14px}.challenge-stats{align-items:center;gap:20px;margin-bottom:16px;display:flex}.challenge-stat{color:var(--text-muted);font-size:13px}.challenge-stat .num{color:var(--accent-gold);font-weight:700;font-family:var(--font-latin);font-size:16px}.progress-bar-container{border-radius:var(--radius-full);background:#ffffff0f;width:100%;height:6px;margin-bottom:14px;overflow:hidden}.progress-bar-fill{border-radius:var(--radius-full);background:linear-gradient(90deg,var(--accent-gold),var(--accent-green));height:100%;transition:width 1s cubic-bezier(.25,.46,.45,.94)}.btn-join-challenge{border-radius:var(--radius-md);width:100%;color:var(--accent-gold);font-family:var(--font-arabic);cursor:pointer;transition:all var(--transition-normal);background:linear-gradient(135deg,#f59e0b26,#10b98126);border:1px solid #f59e0b33;padding:12px;font-size:15px;font-weight:600}.btn-join-challenge:hover{box-shadow:var(--shadow-glow-gold);background:linear-gradient(135deg,#f59e0b40,#10b98140);transform:translateY(-1px)}.progress-section{margin-top:32px;padding-bottom:40px}.progress-card{background:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:24px}.progress-row{justify-content:space-between;align-items:center;padding:12px 0;display:flex}.progress-row:not(:last-child){border-bottom:1px solid var(--border-subtle)}.progress-label{color:var(--text-secondary);font-size:14px}.progress-value{color:var(--text-primary);font-size:16px;font-weight:600;font-family:var(--font-latin)}.progress-value.streak{color:var(--accent-gold)}.progress-value.level{color:var(--accent-green)}.welcome-banner{border-radius:var(--radius-xl);text-align:center;background:linear-gradient(135deg,#10b98114,#8b5cf614);border:1px solid #10b9811f;margin-bottom:28px;padding:32px 28px;animation:.6s ease-out both fadeIn}.welcome-emoji{margin-bottom:12px;font-size:40px}.welcome-text{color:var(--text-primary);font-size:18px;font-weight:500;line-height:1.8}.welcome-text span{color:var(--accent-green);font-weight:700}.welcome-sub{color:var(--text-muted);margin-top:8px;font-size:14px}.loading-container{flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:60vh;display:flex}.loading-spinner{border:3px solid var(--border-card);border-top-color:var(--accent-green);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}.loading-text{color:var(--text-muted);font-size:14px}.infinite-scroll-loader{justify-content:center;align-items:center;width:100%;min-height:60px;padding:24px 0;display:flex}.loading-spinner.small{border-width:2px;width:24px;height:24px}.empty-state{text-align:center;color:var(--text-muted);padding:60px 20px}.empty-state-icon{margin-bottom:16px;font-size:48px}@keyframes cardSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes toastIn{0%{opacity:0;transform:translate(-50%)translateY(-100px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@keyframes toastOut{0%{opacity:1;transform:translate(-50%)translateY(0)}to{opacity:0;transform:translate(-50%)translateY(-100px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media (min-width:640px){.app-container{padding:24px}.card-content{font-size:22px}}@media (max-width:380px){.app-container{padding:12px}.card-content{font-size:18px}.card-options{flex-direction:column}.card-option-btn{text-align:center;width:100%}}