:root{--bg-day-start: #38bdf8;--bg-day-end: #3b82f6;--bg-night-start: #0f172a;--bg-night-end: #312e81;--bg-dawn-start: #f59e0b;--bg-dawn-end: #ea580c;--bg-dusk-start: #4c1d95;--bg-dusk-end: #be185d;--glass-bg: rgba(255, 255, 255, .08);--glass-border: rgba(255, 255, 255, .15);--glass-highlight: rgba(255, 255, 255, .05);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .3);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .7);--accent-gold: #fbbf24;--accent-blue: #60a5fa;--accent-rose: #fb7185;--font-family: "Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-family);background:linear-gradient(135deg,var(--bg-night-start),var(--bg-night-end));color:var(--text-primary);height:100vh;height:100dvh;display:flex;justify-content:center;align-items:center;overflow:hidden;transition:background 1.5s ease;padding:.5rem}main{display:flex;flex-direction:column;gap:.75rem;width:100%;align-items:center;flex:1;justify-content:center;min-height:0}.container{display:flex;flex-direction:column;gap:.5rem;align-items:center;text-align:center;padding:.5rem 0;height:100%;justify-content:center}.cards-container{display:flex;flex-direction:column;gap:.75rem;width:100%;justify-content:center;align-items:stretch;flex:1;max-height:70vh;min-height:0}.card{border-radius:1.25rem;padding:1rem}.time{font-size:2.2rem;margin-bottom:.1rem}.card h2{font-size:.75rem;margin-bottom:.1rem}button{padding:.8rem 2rem;margin-top:.25rem}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");pointer-events:none;z-index:-1}body.day{background:linear-gradient(135deg,var(--bg-day-start),var(--bg-day-end))}body.dawn{background:linear-gradient(135deg,var(--bg-dawn-start),var(--bg-dawn-end))}body.dusk{background:linear-gradient(135deg,var(--bg-dusk-start),var(--bg-dusk-end))}#app{width:100%;max-width:900px;perspective:1000px;height:100%;display:flex;flex-direction:column;justify-content:center}main{display:flex;flex-direction:column;gap:1rem;width:100%;align-items:center;flex:1;justify-content:center;min-height:0}.container{display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center;padding:1rem 0;height:100%;justify-content:center}header h1{font-weight:800;font-size:1.8rem;letter-spacing:-.05em;margin-bottom:.25rem;text-shadow:0 4px 12px rgba(0,0,0,.3)}.date-selector-container{width:100%;overflow-x:auto;padding:.5rem 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}.date-selector-container::-webkit-scrollbar{display:none}.date-slider{display:flex;gap:1rem;padding:0 50%;width:max-content}.date-item{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:60px;padding:.5rem;border-radius:1rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.05);color:var(--text-secondary);cursor:pointer;transition:all .3s ease;opacity:.6;transform:scale(.9)}.date-item.active{background:var(--glass-bg);border-color:var(--glass-border);color:var(--text-primary);opacity:1;transform:scale(1.1);box-shadow:0 4px 15px #0003}.date-item .day{font-size:.7rem;text-transform:uppercase;font-weight:600;margin-bottom:.2rem}.date-item .date{font-size:1.2rem;font-weight:800}.location-status{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:1rem;font-size:.8rem;color:var(--text-primary);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 20px -5px #0003;transition:all .2s;margin-bottom:0}.location-status:hover{transform:translateY(-2px);background:#ffffff26}.location-status .icon{font-size:1rem;color:var(--accent-gold)}.cards-container{display:flex;flex-direction:column;gap:.75rem;width:100%;justify-content:center;align-items:stretch;flex:1;max-height:65vh;min-height:0}.card{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-top:1px solid rgba(255,255,255,.3);border-radius:1.5rem;padding:1.5rem;position:relative;overflow:hidden;box-shadow:var(--glass-shadow);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:0}.card:hover{transform:translateY(-2px) scale(1.01);z-index:10}.imsak-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,transparent,var(--accent-gold),transparent);opacity:.8}.fajr-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,transparent,var(--accent-blue),transparent);opacity:.8}.maghrib-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,transparent,var(--accent-rose),transparent);opacity:.8}.card h2{font-size:.8rem;font-weight:600;margin-bottom:.25rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.15em;display:flex;align-items:center;gap:.4rem}.card h2 span{font-size:1rem}.time{font-size:2.5rem;font-weight:800;margin-bottom:.25rem;line-height:1;text-shadow:0 4px 8px rgba(0,0,0,.15);font-variant-numeric:tabular-nums}.countdown{font-size:.75rem;font-weight:500;color:#ffffffe6;background:#0003;padding:.3rem .8rem;border-radius:.5rem;display:inline-block}.spinner{width:1.2rem;height:1.2rem;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin .8s linear infinite;display:inline-block;vertical-align:middle}@keyframes spin{to{transform:rotate(360deg)}}button{background:#ffffff1a;border:1px solid var(--glass-border);color:#fff;padding:.8rem 2rem;border-radius:9999px;cursor:pointer;font-size:.8rem;font-weight:600;transition:all .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);text-transform:uppercase;letter-spacing:.1em;box-shadow:0 4px 15px #0000001a}button:hover{background:#fff3;transform:translateY(-2px);box-shadow:0 8px 25px #0003;border-color:#fff6}button:active{transform:translateY(0)}footer{margin-top:1rem;color:var(--text-secondary);font-size:.7rem;opacity:.6}footer a{color:#fff;text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.5)}footer a:hover{opacity:1;border-bottom-style:solid}@media(min-width:768px){.container{gap:2rem}.cards-container{flex-direction:row;gap:1.5rem;max-width:900px;max-height:none;flex:0 1 auto}.card{padding:2.5rem 2rem}.time{font-size:3.5rem}header h1{font-size:2.5rem}}