*{box-sizing:border-box;margin:0;padding:0;transition:all .3s ease-in-out}:root{--dark1: #0A0E15;--dark2: #212631;--dark3: #373F4E;--dark4: #4E576A;--dark5: #667085;--light1: #FFFFFF;--light2: #F0F1F5;--light3: #E0E4EB;--light4: #D1D6E0;--light5: #BFC6D4}:root{--bg1: var(--dark2);--bg2: var(--dark3);--text1: var(--light1);--text2: var(--light2);--accent: var(--light5);--shadow: var(--dark1);font-family:Poppins,sans-serif}.light-theme{--bg1: var(--light4);--bg2: var(--light3);--text1: var(--dark1);--text2: var(--dark2);--accent: var(--dark4);--shadow: var(--light5)}.app-wrapper{position:relative;height:100vh;width:100vw;overflow:hidden}.app-wrapper:before,.app-wrapper:after{content:"";position:absolute;inset:0;transition:opacity .3s ease-in-out;z-index:1}.app-wrapper:before{background-image:linear-gradient(90deg,var(--dark3),var(--dark1));opacity:1}.app-wrapper:after{background-image:linear-gradient(90deg,var(--light5),var(--light3));opacity:0}.light-theme .app-wrapper:before{opacity:0}.light-theme .app-wrapper:after{opacity:1}.app-wrapper>*{position:relative;z-index:2}.toggle-btn{background-color:var(--bg2);border:none;border-radius:40px;width:70px;height:2.5rem;transition:background-color .3s ease,border-color .4s ease;cursor:pointer;box-shadow:0 0 8px 0 var(--shadow);position:relative;margin-left:2vw}.toggle-btn .thumb{height:1.28rem;width:20px;background-color:var(--accent);border-radius:40px;transform:translate(0);transition:left .3s ease;position:absolute;left:5px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.toggle-btn.toggled{background-color:var(--bg1)}.toggle-btn:hover{border-color:var(--bg1)}.toggle-btn.toggled .thumb{left:43px}.toggle-theme-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}#dark-theme-icon,#light-theme-icon{color:var(--bg2);scale:1.1}.toggle-units,.toggle-language{color:var(--bg2);font-weight:700;font-size:90%}.search-suggestions-list{width:100%;background-color:var(--bg2);display:flex;flex-direction:column;box-shadow:0 0 8px 0 var(--shadow);border-radius:10px;margin-top:.5rem;max-height:100px;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:var(--accent) var(--bg2);transition:all .3s ease-in-out}.search-suggestions-list.visible{opacity:1;visibility:visible;transform:translateY(0)}.search-suggestions-list.hidden{opacity:0;visibility:hidden;transform:translateY(-10px);max-height:0;margin-top:0;overflow:hidden}.search-suggestion{padding:5px 40px;font-size:18px;color:var(--text2);border-radius:10px;cursor:pointer;transition:background-color .3s ease}.search-suggestion:hover{background-color:var(--accent)}.search-wrapper{background-color:var(--bg2);width:100%;border-radius:40px;height:2.5rem;padding:0 15px;box-shadow:0 0 8px 0 var(--shadow);display:flex;align-items:center}.search-wrapper input{background-color:transparent;color:var(--text2);border:none;outline:none;height:100%;width:100%;font-size:18px;margin-left:10px}.search-wrapper input::placeholder{color:var(--text2)}#search-icon{color:var(--accent);scale:1.5}.loader-container{display:flex;flex-direction:row;align-items:center;justify-content:center;padding-left:4rem;color:var(--text1)}.loader-message{padding-left:1vh}.loader-spinner{width:24px;height:24px;border:2px solid var(--bg2);border-top:2px solid var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:.5rem;padding-left:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-state{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:1rem;text-align:center;color:var(--text1)}#error-icon{scale:2;color:var(--accent)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1vh;text-align:center;color:var(--text1);opacity:.7}.empty-icon{scale:5;margin-bottom:4vh}.empty-header{font-size:5vh}.empty-message{padding-top:1vh;font-size:2.5vh}.header-wrapper{padding-top:7vh;margin:auto;display:flex;flex-direction:row;min-width:200px}.search-bar-container{width:50%;margin-left:5vw;align-items:center;min-width:200px}.location-btn{width:200px;height:2.5rem;border-radius:40px;background-color:var(--accent);margin-left:4vw;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:18px;color:var(--bg2);border:none;box-shadow:0 0 8px 0 var(--shadow)}.location-text{padding-left:7px}.weather-card{width:40vw;height:21vw;padding:2vw;border-radius:40px;background-color:var(--bg1);color:var(--text2);display:flex;flex-direction:column;justify-content:space-between}.weather-card.loading{display:flex;align-items:center;justify-content:center;font-size:1.5vw}.city-name{font-size:3.3vw;font-weight:700;margin-bottom:1vh;text-align:center}.weather-main{display:flex;align-items:center;justify-content:space-between;margin-bottom:2vh}.weather-main-temperature{font-size:2vw;font-weight:700;margin:auto}.description{font-size:1.5vw;text-align:center;text-transform:capitalize;margin-bottom:1.5vh;color:var(--text1)}.weather-details{display:grid;grid-template-columns:1fr 1fr;gap:1vh;font-size:1.2vw}.detail-item{display:flex;flex-direction:column;align-items:center;padding:.5vh;background-color:var(--bg1);border-radius:40px}.detail-label{font-size:1vw;font-weight:700;color:var(--text1)}.aqi-card{width:50vw;height:21vw;padding:2vw;border-radius:40px;background-color:var(--bg1);color:var(--text2);display:flex;flex-direction:column;justify-content:space-between}.aqi-card.loading{display:flex;align-items:center;justify-content:center;font-size:1.5vw}.aqi-card h3{font-weight:700;text-align:center;margin-bottom:1vh}.aqi-main{display:flex;align-items:center;justify-content:space-around;margin-bottom:2vh}.aqi-circle{width:8vw;height:8vw;border:.5vw solid;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:var(--bg2)}.aqi-value{font-size:2.5vw;font-weight:700}.aqi-info{display:flex;flex-direction:column;align-items:center;text-align:center}.aqi-level{font-size:1.8vw;font-weight:700;margin-bottom:.5vh}.aqi-description{font-size:1.2vw;color:var(--text1);max-width:15vw}.pollutants{display:grid;grid-template-columns:1fr 1fr;gap:1vh}.pollutant{display:flex;justify-content:space-between;align-items:center;padding:1vh 1.5vw;background-color:var(--bg1);border-radius:20px}.pollutant-name{font-weight:700;color:var(--text1)}.forecast-card{width:55vw;height:21vw;padding-top:3vh}.hourly-forecast{padding-top:1vh;display:flex;flex-direction:row;justify-content:center}.forecast-hour{width:6vw;height:20vh;margin:1vw;border-radius:40px;background-color:var(--bg1);color:var(--text2);display:flex;flex-direction:column;justify-content:center}.forecast-list-card{width:35vw;height:21vw;padding-top:3vh}.forecast-days{padding-top:1vh;display:flex;flex-direction:row;justify-content:center}.forecast-day{width:4.5vw;height:20vh;margin:1vw;border-radius:40px;background-color:var(--bg1);color:var(--text2);display:flex;flex-direction:column;justify-content:center}.weather-icon{scale:1}.cards-wrapper{padding:5vh;height:20vw;display:flex;flex-wrap:wrap;color:var(--text2)}.appshell-empty-state{width:100%;height:100%;padding-top:17%;color:var(--text2);font-weight:700;font-size:2vw;text-align:center;align-items:center}.card{background-color:var(--bg2);margin:1vw;text-align:center;border-radius:40px;box-shadow:10px 10px 0 2px var(--shadow)}