:root{--primary:#4f46e5;--bg-gradient:linear-gradient(135deg, #1e3a8a, #3b82f6, #60a5fa)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-gradient);color:#fff;min-height:100vh;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}.container{max-width:1100px;margin:0 auto;padding:2rem 1rem}header{text-align:center;margin-bottom:3rem}header h1{justify-content:center;align-items:center;gap:1rem;margin-bottom:.5rem;font-size:3.5rem;font-weight:700;display:flex}header p{opacity:.9;font-size:1.3rem}.search-form{max-width:500px;margin:0 auto 3rem;position:relative}.search-input{color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff40;border:none;border-radius:9999px;width:100%;padding:1.1rem 1.5rem;font-size:1.1rem;box-shadow:0 10px 15px -3px #0003}.search-input:focus{background:#ffffff59;outline:none;box-shadow:0 0 0 4px #ffffff4d}.search-btn{color:var(--primary);cursor:pointer;background:#fff;border:none;border-radius:9999px;justify-content:center;align-items:center;width:52px;height:52px;transition:all .3s;display:flex;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.search-btn:hover{background:#e0e7ff;transform:translateY(-50%)scale(1.05)}.weather-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:center;background:#ffffff26;border:1px solid #fff3;border-radius:28px;margin-bottom:3rem;padding:2.5rem 2rem;box-shadow:0 20px 25px -5px #0000004d}.location{justify-content:center;align-items:center;gap:.8rem;margin-bottom:1.5rem;font-size:1.8rem;display:flex}.weather-icon{width:180px;height:180px;margin:1rem auto}.temperature{margin:.5rem 0;font-size:6.5rem;font-weight:300;line-height:1}.description{text-transform:capitalize;opacity:.95;margin-bottom:2rem;font-size:1.6rem}.details{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.5rem;margin-top:2rem;display:grid}.detail-item{background:#ffffff1a;border-radius:16px;flex-direction:column;align-items:center;gap:.5rem;padding:1.2rem 1rem;display:flex}.detail-item svg{width:32px;height:32px}.forecast{margin-top:2rem}.forecast h2{text-align:center;margin-bottom:1.5rem;font-size:1.8rem}.forecast-container{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.2rem;display:grid}.forecast-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;background:#ffffff1f;border-radius:20px;padding:1.5rem 1rem;transition:transform .3s}.forecast-card:hover{transform:translateY(-8px)}.forecast-card img{width:70px;height:70px}.forecast-date{margin:.8rem 0 .4rem;font-weight:600}.forecast-temp{font-size:1.5rem;font-weight:500}.loader{justify-content:center;align-items:center;min-height:300px;display:flex}.spinner{border:6px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:60px;height:60px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error{text-align:center;color:#fee2e2;background:#f003;border-radius:12px;max-width:500px;margin:2rem auto;padding:1rem}footer{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;background:#ffffff14;border-top:1px solid #ffffff26;margin-top:auto;padding:2rem 1rem 1.5rem}.footer-container{max-width:1100px;margin:0 auto}footer p{color:#ffffffd9;margin:.4rem 0;font-size:1.05rem}footer a{color:#c7d2fe;font-weight:500;text-decoration:none}footer a:hover{color:#fff;text-decoration:underline}.footer-credit{opacity:.7;margin-top:.8rem;font-size:.95rem}.container{flex:1}.search-wrapper{position:relative}.suggestions-dropdown{color:#1e3a8a;z-index:100;background:#fffffff2;border-radius:12px;max-height:280px;margin-top:8px;position:absolute;top:100%;left:0;right:0;overflow-y:auto;box-shadow:0 10px 20px #0000004d}.suggestion-item{cursor:pointer;border-bottom:1px solid #0000001a;padding:14px 18px}.suggestion-item:hover{background:#e0e7ff}.suggestion-item:last-child{border-bottom:none}.search-wrapper{max-width:500px;margin:0 auto 2.5rem;padding:0 1rem;position:relative}.search-input-container{align-items:center;gap:8px;display:flex;position:relative}.search-input{color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff40;border:none;border-radius:9999px;flex:1;min-width:0;padding:16px 16px 16px 20px;font-size:1.05rem}.search-input::placeholder{color:#ffffffbf}.location-btn{color:#fff;cursor:pointer;background:#000;border:none;border-radius:9999px;flex-shrink:0;width:52px;height:52px;font-size:1.4rem}.search-btn{color:#4f46e5;cursor:pointer;background:#fff;border:none;border-radius:9999px;flex-shrink:0;width:52px;height:52px;font-size:1.3rem}@media (width<=700px){.search-input::placeholder{content:"Enter city..."}.search-wrapper{padding:0 .75rem}.search-input{padding:14px 14px 14px 16px;font-size:.95rem}.search-input::placeholder{font-size:.9rem}.location-btn,.search-btn{width:44px;height:44px;font-size:1.1rem}}