@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";.weather-app{width:100%;min-height:100vh;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;color:#fff;overflow-y:auto}.weather-app__overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:5rem 1.5rem;display:flex;flex-direction:column}.weather-app__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.weather-app__header #back-btn,.weather-app__header #favorite-btn{background:#02f3fc33;border:none;border-radius:10px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;margin-bottom:100px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:background .2s,transform .2s}.weather-app__header #back-btn svg,.weather-app__header #favorite-btn svg{width:22px;height:22px}.weather-app__header #back-btn:hover,.weather-app__header #favorite-btn:hover{background:#02f3fc33;transform:scale(1.05)}.weather-app__header #back-btn:active,.weather-app__header #favorite-btn:active{transform:scale(.95)}.weather-app__header .header-center{display:flex;flex-direction:column;align-items:center;flex:1;margin:0 10px}.weather-app__header .header-center h2{font-weight:400;font-size:1.5rem;margin:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.weather-app__header .header-center h1{font-size:3.5rem;font-weight:200;margin:.2rem 0}.weather-app__header .header-center p{margin:.1rem 0;font-size:.9rem}.weather-app__hourly{display:flex;gap:1rem;overflow-x:auto;padding:1rem 0;margin-bottom:1rem}.weather-app__hourly .hour-card{min-width:70px;background:#02f3fc33;padding:.7rem .5rem;border-radius:12px;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.weather-app__hourly .hour-card p{margin:.2rem 0}.weather-app__hourly .hour-card img{width:35px;margin:.3rem 0}.weather-app__hourly .hour-card.current-hour{border:2px solid #fff}.weather-app__forecast{margin:1rem 0;overflow:hidden}.weather-app__forecast h3{margin-bottom:.5rem;font-weight:400;font-size:1.2rem}.weather-app__forecast .day-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem;border-bottom:1px solid rgba(2,243,252,.2);background:#0003;border-radius:10px;margin-bottom:.3rem}.weather-app__forecast .day-row .day-name{flex:1;font-weight:500}.weather-app__forecast .day-row img{width:25px;margin:0 5px}.weather-app__forecast .day-row .temps{flex:1;text-align:center}.weather-app__forecast .day-row .wind{flex:1;text-align:right;font-size:.8rem}.weather-app__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-bottom:0}.weather-app__grid .info-card{background:#02f3fc33;padding:.6rem;border-radius:12px;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .2s}.weather-app__grid .info-card:hover{transform:translateY(-3px)}.weather-app__grid .info-card .info-label{font-size:.8rem;font-weight:400;margin-bottom:.2rem}.weather-app__grid .info-card .info-value{font-size:1rem;font-weight:500}.weather-app__hourly::-webkit-scrollbar{height:6px}.weather-app__hourly::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}#favorite-btn.active{background:#ffd7004d}#favorite-btn.active svg{fill:gold;stroke:gold}.loader-wrapper{height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}@media screen and (min-width:700px){.loader-wrapper{height:900px}}.loading-text{font-size:14px;font-weight:700}.spinner-circle{width:40px;height:40px;border:4px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#app{position:relative;overflow:hidden;background:linear-gradient(160deg,#7f8f9e,#38a8ad);max-width:800px;margin:0 auto;width:100%}.menu-background{position:absolute;inset:0;overflow:hidden;z-index:0}.weather-icons{position:absolute;width:100%;height:100%}.icon{position:absolute;font-size:42px;opacity:.25;animation:floatWeather 22s linear infinite}.icon:nth-child(1){left:8%;animation-duration:18s}.icon:nth-child(2){left:25%;animation-duration:24s}.icon:nth-child(3){left:50%;animation-duration:20s}.icon:nth-child(4){left:70%;animation-duration:26s}.icon:nth-child(5){left:90%;animation-duration:22s}@keyframes floatWeather{0%{transform:translateY(110vh) rotate(0)}to{transform:translateY(-200px) rotate(360deg)}}.menu-container{position:relative;z-index:2;padding-top:30px}.menu-header{display:flex;justify-content:space-between;align-items:center;margin:20px}.menu-header h1{padding-left:20px;font-size:2.2rem;font-weight:700;color:#fff}.menu-header #edit-btn{padding:7px 20px;margin-right:10px;font-size:.9rem;font-weight:600;border:none;border-radius:8px;background:#1e88e5;color:#fff;cursor:pointer;transition:all .2s}.menu-header #edit-btn:hover{background:#1565c0;transform:scale(1.05)}.menu-header #edit-btn.active{background:#e53935}.search-container{display:flex;justify-content:center;gap:10px;margin-bottom:25px}.search-container input{padding:12px;width:220px;border-radius:10px;border:none;outline:none;font-size:.95rem}.search-container button{padding:12px 16px;border-radius:10px;border:none;background:#0e7ad8;color:#fff;font-weight:600;cursor:pointer;transition:all .2s}.search-container button:hover{background:#1565c0;transform:scale(1.05)}.saved-cities{list-style:none;padding:0;max-width:360px;margin:auto;display:flex;flex-direction:column;gap:1rem}.saved-city{position:relative;border-radius:16px;overflow:hidden;cursor:pointer;height:100px;color:#fff;background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform .2s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.saved-city:hover{transform:scale(1.04)}.saved-city .overlay{position:absolute;inset:0;background:#00000073;z-index:0}.saved-city .city-info{position:relative;display:flex;flex-direction:column;padding:.7rem;font-weight:600;z-index:1}.saved-city .city-info .city-name{font-size:1.1rem;margin-bottom:2px}.saved-city .city-info .country{font-size:.9rem;opacity:.8;margin-bottom:6px}.saved-city .city-info .bottom-row{display:flex;justify-content:space-between;align-items:center}.saved-city .city-info .bottom-row .condition{font-size:.85rem;opacity:.9}.saved-city .city-info .bottom-row .temp{font-size:1.4rem;font-weight:700}.saved-city .delete-btn{position:absolute;top:8px;right:8px;background:#ffffff59;border:none;border-radius:8px;color:#ff5252;font-size:1rem;padding:5px 9px;cursor:pointer;transition:all .2s;z-index:2}.saved-city .delete-btn:hover{color:red;background:#ffffff8c}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background-color:#394759}@media screen and (min-width:700px){body{display:flex;align-items:center;justify-content:center;min-height:100vh}}#app{width:100%;height:100dvh;color:#fff;display:flex;flex-direction:column}@media screen and (min-width:700px){#app{width:400px;height:900px;border-radius:6px;box-shadow:0 10px 30px #0006}}