@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap";
:root{--primary-gradient:linear-gradient(135deg,#10b981 0%,#059669 50%,#047857 100%);--gold-gradient:linear-gradient(135deg,#fbbf24 0%,#f59e0b 50%,#d97706 100%);--night-gradient:linear-gradient(180deg,#0a1628 0%,#1e3a5f 50%,#0f172a 100%);--emerald-50:#ecfdf5;--emerald-100:#d1fae5;--emerald-200:#a7f3d0;--emerald-300:#6ee7b7;--emerald-400:#34d399;--emerald-500:#10b981;--emerald-600:#059669;--emerald-700:#047857;--gold-300:#fcd34d;--gold-400:#fbbf24;--gold-500:#f59e0b;--gold-600:#d97706;--dark-900:#0a1628;--dark-800:#0f172a;--dark-700:#1e293b;--dark-600:#334155;--dark-500:#475569;--dark-400:#64748b;--dark-300:#94a3b8;--dark-200:#cbd5e1;--dark-100:#e2e8f0;--dark-50:#f8fafc;--success:#22c55e;--warning:#f59e0b;--danger:#ef4444;--info:#3b82f6;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 6px -1px #0000004d,0 2px 4px -2px #0003;--shadow-lg:0 10px 15px -3px #0000004d,0 4px 6px -4px #0003;--shadow-xl:0 20px 25px -5px #0000004d,0 8px 10px -6px #0003;--shadow-glow:0 0 20px #10b98166;--shadow-gold:0 0 20px #fbbf244d;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-slow:.35s ease;--transition-bounce:.5s cubic-bezier(.68,-.55,.265,1.55)}[data-theme=light]{--primary-gradient:linear-gradient(135deg,#10b981 0%,#059669 50%,#047857 100%);--gold-gradient:linear-gradient(135deg,#fbbf24 0%,#f59e0b 50%,#d97706 100%);--night-gradient:linear-gradient(180deg,#f0fdf4 0%,#ecfdf5 50%,#e2e8f0 100%);--dark-900:#fff;--dark-800:#f8fafc;--dark-700:#f1f5f9;--dark-600:#e2e8f0;--dark-500:#cbd5e1;--dark-400:#64748b;--dark-300:#475569;--dark-200:#334155;--dark-100:#1e293b;--dark-50:#0f172a;--shadow-sm:0 1px 2px #0000000f;--shadow-md:0 4px 6px -1px #00000014,0 2px 4px -2px #0000000d;--shadow-lg:0 10px 15px -3px #00000014,0 4px 6px -4px #0000000d;--shadow-xl:0 20px 25px -5px #00000014,0 8px 10px -6px #0000000d;--shadow-glow:0 0 20px #10b98140;--shadow-gold:0 0 20px #fbbf2433}[data-theme=light] body{background:var(--night-gradient);color:var(--dark-100)}[data-theme=light] .app-container{background:var(--dark-800)}[data-theme=light] .stats-card,[data-theme=light] .activity-card{background:linear-gradient(135deg,var(--dark-700)0%,var(--dark-800)100%);border:1px solid var(--dark-600)}[data-theme=light] .activity-card.completed{background:linear-gradient(135deg,#10b98114 0%,#0596690a 100%);border-color:#10b98133}[data-theme=light] .activity-icon{background:#0000000a}[data-theme=light] .activity-card:before{background:var(--dark-500)}[data-theme=light] .quran-card{background:linear-gradient(135deg,var(--dark-700)0%,var(--dark-800)100%);border:1px solid var(--dark-600)}[data-theme=light] .bottom-nav{background:var(--dark-900);border-top:1px solid var(--dark-600)}[data-theme=light] .bottom-nav-inner{background:var(--dark-800);box-shadow:none;border:none;border-radius:0}[data-theme=light] .nav-item{color:var(--dark-400)}[data-theme=light] .nav-item:hover{background:#0000000a}[data-theme=light] .nav-item.active{color:var(--emerald-600);background:#10b9811a}[data-theme=light] .modal-overlay{background:#0006}[data-theme=light] .modal-content{background:var(--dark-900);border:1px solid var(--dark-600)}[data-theme=light] .modal-handle{background:var(--dark-500)}[data-theme=light] .modal-close{background:var(--dark-700);color:var(--dark-300)}[data-theme=light] .form-input{background:var(--dark-700);border:1px solid var(--dark-600);color:var(--dark-100)}[data-theme=light] .settings-item{background:var(--dark-700);border:1px solid var(--dark-600)}[data-theme=light] .settings-item:hover{background:var(--dark-600)}[data-theme=light] .settings-icon{background:#10b9811a}[data-theme=light] .toggle{background:var(--dark-500)}[data-theme=light] .toast{background:var(--dark-900);border:1px solid var(--dark-600);box-shadow:var(--shadow-xl)}[data-theme=light] .history-card{background:var(--dark-700);border:1px solid var(--dark-600)}[data-theme=light] .history-badge{color:var(--emerald-600);background:#10b9811a}[data-theme=light] .skeleton{background:linear-gradient(90deg,var(--dark-700)25%,var(--dark-600)50%,var(--dark-700)75%);background-size:200% 100%}[data-theme=light] .stat-item{background:#00000005}[data-theme=light] .stat-item:hover{background:#10b9810f}[data-theme=light] .btn-secondary{background:var(--dark-700);color:var(--dark-200);border:1px solid var(--dark-600)}[data-theme=light] .btn-secondary:hover{background:var(--dark-600)}[data-theme=light] ::-webkit-scrollbar-thumb{background:var(--dark-500)}[data-theme=light] ::selection{background:var(--emerald-500);color:#fff}html{transition:background-color .3s}html[data-theme] body,html[data-theme] .app-container,html[data-theme] .stats-card,html[data-theme] .activity-card,html[data-theme] .quran-card,html[data-theme] .bottom-nav-inner,html[data-theme] .modal-content,html[data-theme] .settings-item,html[data-theme] .toast{transition:background-color .3s,color .3s,border-color .3s,box-shadow .3s}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Outfit,-apple-system,BlinkMacSystemFont,sans-serif}body{background:var(--night-gradient);color:var(--dark-100);min-height:100dvh;line-height:1.6;overflow-x:hidden}.app-container{background:var(--dark-800);max-width:430px;min-height:100dvh;margin:0 auto;position:relative;overflow-x:hidden}.header{z-index:100;background:linear-gradient(135deg,#047857 0%,#065f46 40%,#064e3b 100%);padding:14px 18px 12px;position:sticky;top:0;box-shadow:0 4px 20px #0006,0 1px #10b98133}.header-content{justify-content:space-between;align-items:center;display:flex}.header-title{align-items:center;gap:10px;display:flex}.header-icon{filter:drop-shadow(0 0 8px #fbbf244d);font-size:26px;animation:3s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.header h1{color:#fff;letter-spacing:-.3px;font-size:18px;font-weight:700;line-height:1.2}.header-date{color:#a7f3d0d9;font-size:11px;font-weight:400;line-height:1.3}@keyframes dropdownSlide{0%{opacity:0;transform:translateY(-8px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.main-content{padding:20px 20px 100px}.stats-card{background:linear-gradient(135deg,var(--dark-700)0%,var(--dark-800)100%);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);border:1px solid #ffffff0d;margin-bottom:24px;padding:24px}.stats-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.stats-title{color:var(--dark-300);text-transform:uppercase;letter-spacing:.5px;font-size:14px;font-weight:500}.stats-day-badge{background:var(--gold-gradient);color:var(--dark-900);border-radius:var(--radius-full);box-shadow:var(--shadow-gold);padding:6px 14px;font-size:12px;font-weight:700}.stats-grid{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.stat-item{text-align:center;border-radius:var(--radius-lg);transition:var(--transition-normal);background:#ffffff08;padding:16px 8px}.stat-item:hover{background:#10b9811a;transform:translateY(-2px)}.stat-value{background:var(--primary-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:28px;font-weight:800}.stat-label{color:var(--dark-400);text-transform:uppercase;letter-spacing:.5px;margin-top:4px;font-size:11px;font-weight:500}.section{margin-bottom:24px}.section-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.section-title{color:var(--dark-100);align-items:center;gap:8px;font-size:16px;font-weight:700;display:flex}.section-title span{font-size:18px}.section-action{color:var(--emerald-400);cursor:pointer;transition:var(--transition-fast);font-size:13px;font-weight:500}.section-action:hover{color:var(--emerald-300)}.activity-card{background:linear-gradient(135deg,var(--dark-700)0%,var(--dark-800)100%);border-radius:var(--radius-lg);cursor:pointer;transition:var(--transition-normal);border:1px solid #ffffff0d;align-items:center;gap:16px;margin-bottom:12px;padding:16px;display:flex;position:relative;overflow:hidden}.activity-card:before{content:"";background:var(--dark-500);width:4px;transition:var(--transition-normal);position:absolute;top:0;bottom:0;left:0}.activity-card.completed:before{background:var(--primary-gradient)}.activity-card:hover{box-shadow:var(--shadow-md);transform:translate(4px)}.activity-card.completed{background:linear-gradient(135deg,#10b9811a 0%,#0596690d 100%)}.activity-icon{border-radius:var(--radius-md);background:#ffffff0d;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:24px;display:flex}.activity-card.completed .activity-icon{background:var(--primary-gradient);box-shadow:var(--shadow-glow)}.activity-info{flex:1}.activity-name{color:var(--dark-100);margin-bottom:2px;font-size:15px;font-weight:600}.activity-time{color:var(--dark-400);font-size:12px}.activity-status{border-radius:var(--radius-full);border:2px solid var(--dark-500);width:28px;height:28px;transition:var(--transition-bounce);flex-shrink:0;justify-content:center;align-items:center;display:flex}.activity-card.completed .activity-status{background:var(--primary-gradient);box-shadow:var(--shadow-glow);border-color:#0000}.activity-status svg{opacity:0;width:16px;height:16px;transition:var(--transition-bounce);transform:scale(0)}.activity-card.completed .activity-status svg{opacity:1;transform:scale(1)}.quran-card{background:linear-gradient(135deg,var(--dark-700)0%,var(--dark-800)100%);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);border:1px solid #ffffff0d;padding:20px}.quran-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.quran-title{align-items:center;gap:10px;display:flex}.quran-title span:first-child{font-size:24px}.quran-title span:last-child{color:var(--dark-100);font-size:16px;font-weight:600}.quran-juz{color:var(--gold-400);font-size:13px;font-weight:600}.progress-bar{background:var(--dark-600);border-radius:var(--radius-full);height:10px;margin-bottom:12px;overflow:hidden}.progress-fill{background:var(--gold-gradient);border-radius:var(--radius-full);height:100%;transition:width .5s;position:relative}.progress-fill:after{content:"";background:linear-gradient(90deg,#0000,#ffffff4d);width:20px;animation:2s infinite shimmer;position:absolute;top:0;bottom:0;right:0}@keyframes shimmer{0%{opacity:0}50%{opacity:1}to{opacity:0}}.progress-labels{color:var(--dark-400);justify-content:space-between;font-size:12px;display:flex}.progress-current{color:var(--gold-400);font-weight:600}.add-quran-btn{border:2px dashed var(--dark-500);border-radius:var(--radius-md);width:100%;color:var(--dark-300);cursor:pointer;transition:var(--transition-normal);background:0 0;justify-content:center;align-items:center;gap:8px;margin-top:16px;padding:12px;font-size:14px;font-weight:500;display:flex}.add-quran-btn:hover{border-color:var(--emerald-500);color:var(--emerald-400);background:#10b9810d}.bottom-nav{background:var(--dark-900);z-index:1000;border-top:1px solid var(--dark-600);width:100%;max-width:430px;padding:0;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.bottom-nav-inner{background:var(--dark-800);padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom));box-shadow:none;border:none;border-radius:0;grid-template-columns:repeat(4,1fr);gap:4px;display:grid}.nav-item{border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-normal);color:var(--dark-400);background:0 0;border:none;flex-direction:column;align-items:center;gap:4px;padding:8px;display:flex}.nav-item:hover{background:#ffffff0d}.nav-item.active{color:var(--emerald-400);background:#10b98126}.nav-item.active .nav-icon{transform:scale(1.1)}.nav-icon{transition:var(--transition-bounce);font-size:22px}.nav-label{text-transform:uppercase;letter-spacing:.3px;font-size:10px;font-weight:600}.modal-overlay{-webkit-backdrop-filter:blur(8px);z-index:2000;opacity:0;visibility:hidden;transition:var(--transition-normal);background:#000c;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.modal-overlay.active{opacity:1;visibility:visible}.modal-content{background:var(--dark-800);border-radius:var(--radius-xl)var(--radius-xl)0 0;width:100%;max-width:430px;max-height:85vh;padding:24px;transition:transform .35s cubic-bezier(.32,.72,0,1);overflow-y:auto;transform:translateY(100%)}.modal-overlay.active .modal-content{transform:translateY(0)}.modal-handle{background:var(--dark-500);border-radius:var(--radius-full);width:40px;height:4px;margin:0 auto 20px}.modal-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.modal-title{color:var(--dark-100);font-size:20px;font-weight:700}.modal-close{border-radius:var(--radius-full);background:var(--dark-700);width:36px;height:36px;color:var(--dark-300);cursor:pointer;transition:var(--transition-fast);border:none;justify-content:center;align-items:center;font-size:20px;display:flex}.modal-close:hover{background:var(--dark-600);color:var(--dark-100)}.form-group{margin-bottom:20px}.form-label{color:var(--dark-300);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:13px;font-weight:600;display:block}.form-input{background:var(--dark-700);border:1px solid var(--dark-600);border-radius:var(--radius-md);width:100%;color:var(--dark-100);transition:var(--transition-fast);padding:14px 16px;font-family:inherit;font-size:15px}.form-input:focus{border-color:var(--emerald-500);outline:none;box-shadow:0 0 0 3px #10b98133}.form-input::placeholder{color:var(--dark-500)}.btn{border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-normal);border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px 24px;font-family:inherit;font-size:15px;font-weight:600;display:inline-flex}.btn-primary{background:var(--primary-gradient);color:#fff;box-shadow:var(--shadow-md)}.btn-primary:hover{box-shadow:var(--shadow-glow);transform:translateY(-2px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--dark-700);color:var(--dark-200);border:1px solid var(--dark-600)}.btn-secondary:hover{background:var(--dark-600)}.toast-container{z-index:3000;pointer-events:none;width:calc(100% - 40px);max-width:390px;position:fixed;top:24px;left:50%;transform:translate(-50%)}.toast{background:var(--dark-700);border-left:4px solid var(--emerald-500);border-radius:var(--radius-md);box-shadow:var(--shadow-xl);opacity:0;pointer-events:auto;align-items:center;gap:12px;margin-bottom:12px;padding:16px;animation:.3s forwards slideIn;display:flex;transform:translateY(-20px)}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.toast-icon{font-size:20px}.toast-message{color:var(--dark-100);font-size:14px;font-weight:500}.empty-state{text-align:center;padding:40px 20px}.empty-icon{opacity:.5;margin-bottom:16px;font-size:48px}.empty-title{color:var(--dark-300);margin-bottom:8px;font-size:16px;font-weight:600}.empty-desc{color:var(--dark-400);font-size:13px}.streak-container{text-align:center;padding:20px}.streak-flame{font-size:48px;animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.streak-count{background:var(--gold-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:8px 0;font-size:36px;font-weight:800}.streak-label{color:var(--dark-400);text-transform:uppercase;letter-spacing:1px;font-size:12px}.settings-list{flex-direction:column;gap:8px;display:flex}.settings-item{background:var(--dark-700);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-normal);justify-content:space-between;align-items:center;padding:16px;display:flex}.settings-item:hover{background:var(--dark-600)}.settings-item-left{align-items:center;gap:14px;display:flex}.settings-icon{border-radius:var(--radius-md);background:#10b98126;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;display:flex}.settings-label{color:var(--dark-100);font-size:15px;font-weight:500}.settings-desc{color:var(--dark-400);margin-top:2px;font-size:12px}.toggle{background:var(--dark-500);border-radius:var(--radius-full);cursor:pointer;width:52px;height:28px;transition:var(--transition-normal);position:relative}.toggle.active{background:var(--emerald-500)}.toggle:after{content:"";width:20px;height:20px;transition:var(--transition-normal);box-shadow:var(--shadow-sm);background:#fff;border-radius:50%;position:absolute;top:4px;left:4px}.toggle.active:after{left:28px}.history-card{background:var(--dark-700);border-radius:var(--radius-lg);margin-bottom:12px;padding:16px}.history-date{color:var(--dark-400);align-items:center;gap:6px;margin-bottom:12px;font-size:13px;display:flex}.history-items{flex-wrap:wrap;gap:8px;display:flex}.history-badge{border-radius:var(--radius-full);color:var(--emerald-400);background:#10b98126;padding:6px 12px;font-size:12px;font-weight:500}.history-badge.missed{color:#f87171;background:#ef444426}.skeleton{background:linear-gradient(90deg,var(--dark-700)25%,var(--dark-600)50%,var(--dark-700)75%);border-radius:var(--radius-md);background-size:200% 100%;animation:1.5s infinite skeleton-loading}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}@supports (padding-bottom:env(safe-area-inset-bottom)){.bottom-nav{padding-bottom:0}.main-content{padding-bottom:calc(100px + env(safe-area-inset-bottom))}}.page-enter{opacity:0;transform:translate(20px)}.page-enter-active{opacity:1;transition:all .3s;transform:translate(0)}.page-exit{opacity:1;transform:translate(0)}.page-exit-active{opacity:0;transition:all .3s;transform:translate(-20px)}.ripple{position:relative;overflow:hidden}.ripple:after{content:"";opacity:0;transform-origin:50%;background:#ffffff4d;border-radius:50%;width:5px;height:5px;position:absolute;top:50%;left:50%;transform:scale(1)}.ripple:active:after{animation:.6s ease-out ripple}@keyframes ripple{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(100)}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--dark-600);border-radius:var(--radius-full)}::selection{background:var(--emerald-500);color:#fff}