@import "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";:root{--primary-blue:#87ceeb;--secondary-blue:#a5d8ff;--light-lavender:#e6e6fa;--bg-gradient:linear-gradient(135deg, #a5d8ff 0%, #eef1ff 50%, #fdfdfd 100%);--premium-shadow:0 10px 30px #0000000d;--glass-bg:#ffffffb3;--glass-border:#fff6;--text-dark:#2d3436;--text-muted:#636e72;--radius-xl:30px;--radius-lg:20px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-gradient);min-height:100vh;color:var(--text-dark);justify-content:center;align-items:center;font-family:Poppins,sans-serif;display:flex;overflow-x:hidden}#root{justify-content:center;width:100%;padding:20px;display:flex}.app-container{flex-direction:column;gap:25px;width:100%;max-width:480px;animation:.8s ease-out fadeIn;display:flex}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--premium-shadow);padding:25px}.search-container{width:100%;position:relative}.search-input{border-radius:var(--radius-lg);width:100%;box-shadow:var(--premium-shadow);background:#fff;border:none;outline:none;padding:15px 50px 15px 25px;font-family:inherit;font-size:1rem;transition:all .3s}.search-input:focus{transform:translateY(-2px);box-shadow:0 15px 35px #0000001a}.icon-button{cursor:pointer;color:var(--text-muted);background:0 0;border:none;justify-content:center;align-items:center;transition:color .3s;display:flex;position:absolute;top:50%;right:15px;transform:translateY(-50%)}.icon-button:hover{color:var(--primary-blue)}.location-btn{right:50px}.weather-card{text-align:center;flex-direction:column;align-items:center;gap:15px;display:flex}.city-name{margin-bottom:5px;font-size:1.8rem;font-weight:600}.weather-icon-main{object-fit:contain;filter:drop-shadow(0 10px 15px #0000001a);width:150px;height:150px;animation:4s ease-in-out infinite float}.temperature{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#2d3436 0%,#636e72 100%);-webkit-background-clip:text;background-clip:text;font-size:4rem;font-weight:700;line-height:1}.unit{vertical-align:super;margin-left:2px;font-size:1.5rem}.condition{color:var(--text-muted);text-transform:capitalize;font-size:1.2rem;font-weight:500}.forecast-container{scrollbar-width:none;scroll-behavior:smooth;gap:20px;padding:10px 5px;display:flex;overflow-x:auto}.forecast-container::-webkit-scrollbar{display:none}.forecast-item{border-radius:var(--radius-lg);background:#fff6;flex-direction:column;align-items:center;gap:8px;min-width:80px;padding:15px 10px;transition:transform .3s;display:flex}.forecast-item:hover{background:#fff9;transform:translateY(-5px)}.forecast-time{color:var(--text-muted);font-size:.85rem;font-weight:500}.forecast-icon{object-fit:contain;width:45px;height:45px}.forecast-temp{font-size:1rem;font-weight:600}.loader-container{flex-direction:column;align-items:center;gap:15px;display:flex}.spinner{border:5px solid #87ceeb33;border-top-color:var(--primary-blue);border-radius:50%;width:50px;height:50px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (width<=480px){.app-container{padding:10px}.temperature{font-size:3.5rem}.city-name{font-size:1.5rem}}