@property --bg-1{syntax: "<color>"; inherits: false; initial-value: #4a90e2;}@property --bg-2{syntax: "<color>"; inherits: false; initial-value: #50e3c2;}@property --bg-3{syntax: "<color>"; inherits: false; initial-value: #87CEEB;}@property --bg-4{syntax: "<color>"; inherits: false; initial-value: #00BFFF;}:root{--glass-bg: rgba(0, 0, 0, .25);--glass-border: rgba(255, 255, 255, .15);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .3);--glass-blur: 10px;--font-family: "Outfit", "Inter", system-ui, -apple-system, sans-serif;--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .8);--accent: #f39c12;--success: #2ecc71}body.theme-day{--bg-1: #4a90e2;--bg-2: #50e3c2;--bg-3: #87CEEB;--bg-4: #00BFFF}body.theme-dawn{--bg-1: #2c3e50;--bg-2: #fd746c;--bg-3: #ff9068;--bg-4: #2a0845}body.theme-night{--bg-1: #0f2027;--bg-2: #203a43;--bg-3: #2c5364;--bg-4: #000000}body.theme-sunset{--bg-1: #fc4a1a;--bg-2: #f7b733;--bg-3: #ff416c;--bg-4: #ff4b2b}*{margin:0;padding:0;box-sizing:border-box}html{height:-webkit-fill-available}body{font-family:var(--font-family);background:linear-gradient(-45deg,var(--bg-1),var(--bg-2),var(--bg-3),var(--bg-4));background-size:400% 400%;color:var(--text-primary);text-shadow:0 1px 3px rgba(0,0,0,.3);min-height:100vh;min-height:-webkit-fill-available;min-height:100dvh;display:flex;flex-direction:column;transition:--bg-1 3s ease-in-out,--bg-2 3s ease-in-out,--bg-3 3s ease-in-out,--bg-4 3s ease-in-out,background-color 3s ease-in-out;overflow:hidden;touch-action:manipulation;overscroll-behavior:none;animation:bgGradient 20s ease infinite}@keyframes bgGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.animate-fade-in{opacity:0;transform:translateY(15px);animation:fadeInUp .5s ease forwards}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.glass{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:20px}#app{max-width:600px;width:100%;margin:0 auto;padding:calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom)) 20px;display:flex;flex-direction:column;justify-content:center;gap:20px;flex:1}header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px}.location-display{display:flex;flex-direction:column}.location-display h1{font-size:1.5rem;font-weight:600}.location-display p{font-size:.9rem;color:var(--text-secondary)}.settings-btn{background:none;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer;transition:transform .3s ease}.settings-btn:hover{transform:rotate(45deg)}.hero{perspective:1000px;cursor:pointer;background:transparent;border:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.hero-inner{position:relative;width:100%;height:100%;min-height:180px;text-align:center;transition:transform .6s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d}.hero.is-flipped .hero-inner{transform:rotateY(180deg)}.hero-front,.hero-back{position:relative;width:100%;height:100%;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;padding:40px 20px;display:flex;flex-direction:column;gap:15px}.hero-front,.hero-back{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:20px}.hero-back{position:absolute;top:0;left:0;transform:rotateY(180deg) translateZ(1px)}.hero-front{transform:rotateY(0) translateZ(1px)}.next-prayer-label{font-size:1.2rem;font-weight:500;text-transform:uppercase;letter-spacing:2px;color:var(--text-secondary)}.countdown{font-size:4rem;font-weight:700;text-shadow:0 4px 10px rgba(0,0,0,.2);margin-bottom:5px}.next-prayer-name{font-size:2rem;font-weight:600;color:var(--accent)}.carousel-container{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:40px;padding:20px 20px 40px;margin:-20px -20px -40px;scrollbar-width:none;-ms-overflow-style:none}.carousel-container::-webkit-scrollbar{display:none}.carousel-item{scroll-snap-align:center;flex:0 0 100%}@media(min-width:601px){.mobile-only-card{display:none!important}.carousel-container{display:block;overflow-x:visible;padding:0;margin:0}}.prayers-list{display:flex;flex-direction:column;gap:12px;padding:20px}.prayer-item{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-radius:12px;transition:background .3s ease;background:#ffffff0d}.prayer-item:hover{background:#ffffff26}.prayer-item.active{background:var(--accent);color:#fff;font-weight:700}.prayer-name{font-size:1.2rem}.prayer-time{font-size:1.2rem;font-weight:600}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s ease}.modal-overlay.active{opacity:1;pointer-events:all}.modal{width:90%;max-width:400px;background:var(--glass-bg);padding:30px;border-radius:20px;box-shadow:var(--glass-shadow);border:1px solid var(--glass-border);display:flex;flex-direction:column;gap:20px;transform:translateY(20px);transition:transform .3s ease;color:#fff;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}.modal-overlay.active .modal{transform:translateY(0)}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--glass-border);padding-bottom:10px}.modal-header h2{font-size:1.5rem}.close-btn{background:none;border:none;color:#fff;font-size:2rem;line-height:1;cursor:pointer}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:.9rem;font-weight:500}.form-control{width:100%;padding:12px;border-radius:8px;border:1px solid var(--glass-border);background:#ffffff1a;color:#fff;font-size:1rem;outline:none;font-family:inherit}.form-control option{background:#2c3e50;color:#fff}.form-control:focus{border-color:var(--accent)}.city-search-wrapper{position:relative}.city-results{position:absolute;top:100%;left:0;width:100%;background:#2c3e50;border-radius:8px;margin-top:5px;max-height:150px;overflow-y:auto;z-index:10;box-shadow:0 4px 15px #0000004d;display:none}.city-results.active{display:block}.city-result-item{padding:10px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.1)}.city-result-item:hover{background:#ffffff1a}.btn-primary{background:var(--accent);color:#fff;border:none;padding:12px;border-radius:8px;font-size:1rem;font-family:inherit;font-weight:600;cursor:pointer;transition:background .3s ease}.btn-primary:hover{background:#e67e22}.custom-select{position:relative;width:100%}.select-selected{background:#ffffff1a;border:1px solid var(--glass-border);padding:12px;border-radius:8px;color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;justify-content:space-between;align-items:center;transition:border-color .3s ease}.select-selected:after{content:"";border:6px solid transparent;border-color:#fff transparent transparent transparent;margin-top:6px}.select-selected.select-arrow-active:after{border-color:transparent transparent #fff transparent;margin-top:-6px}.select-selected:hover,.custom-select.active .select-selected{border-color:var(--accent)}.select-items{position:absolute;background:#2c3e50;top:100%;left:0;right:0;z-index:99;border-radius:8px;margin-top:5px;box-shadow:0 4px 15px #0000004d;overflow:hidden;max-height:200px;overflow-y:auto}.select-items div{padding:12px;color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;border-bottom:1px solid rgba(255,255,255,.05)}.select-items div:hover,.same-as-selected{background:#ffffff1a}.select-hide{display:none}.color-picker{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:5px}.color-swatch{width:30px;height:30px;border-radius:50%;cursor:pointer;box-shadow:0 2px 5px #0003;border:2px solid transparent;transition:transform .2s ease,border-color .2s ease}.color-swatch:hover{transform:scale(1.1)}.color-swatch.selected{transform:scale(1.15);border-color:#fff;box-shadow:0 0 10px #ffffff80}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:20px}.spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:600px){#app{padding:calc(5px + env(safe-area-inset-top)) 7.5vw calc(5px + env(safe-area-inset-bottom)) 7.5vw;margin:0 auto;width:100%;gap:8px}.carousel-container{margin-left:-7.5vw;margin-right:-7.5vw;padding-left:7.5vw;padding-right:7.5vw}.carousel-item{flex:0 0 85vw}header{padding:10px 15px}.hero-front,.hero-back{padding:15px 10px;gap:8px}.hero-inner{min-height:130px}.countdown{font-size:3.2rem}.next-prayer-name{font-size:1.5rem}.prayers-list{padding:10px;gap:6px}.prayer-item{padding:10px 15px;border-radius:8px}.prayer-name,.prayer-time{font-size:1.1rem}.modal{padding:20px;gap:15px}.form-control{padding:10px;font-size:.95rem}.btn-primary{padding:10px}}@media(max-width:400px){.countdown{font-size:2.8rem}.hero-inner{min-height:115px}}