*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#74b9ff,#0984e3);min-height:100vh;color:#333}.container{max-width:1200px;margin:0 auto;padding:20px}.header{text-align:center;margin-bottom:30px;color:#fff}.header h1{font-size:2.5rem;margin-bottom:10px;text-shadow:0 2px 4px rgba(0,0,0,.3)}.header p{font-size:1.1rem;opacity:.9}.search-section{display:flex;flex-direction:column;align-items:center;gap:15px;margin-bottom:30px}.search-container{display:flex;background:#fff;border-radius:25px;padding:5px;box-shadow:0 4px 15px #0000001a;width:100%;max-width:400px}#cityInput{flex:1;border:none;padding:15px 20px;font-size:1rem;border-radius:20px;outline:none}#searchBtn{background:#0984e3;color:#fff;border:none;padding:15px 20px;border-radius:20px;cursor:pointer;transition:background .3s ease}#searchBtn:hover{background:#0770c2}.location-btn{background:#fff3;color:#fff;border:2px solid white;padding:12px 24px;border-radius:25px;cursor:pointer;font-size:1rem;transition:all .3s ease}.location-btn:hover{background:#fff;color:#0984e3}.loading{text-align:center;color:#fff;margin:40px 0}.spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top:4px solid white;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error{background:#e74c3ce6;color:#fff;padding:20px;border-radius:10px;text-align:center;margin:20px 0}.error i{font-size:2rem;margin-bottom:10px}.current-weather{background:#fffffff2;border-radius:20px;padding:30px;margin-bottom:30px;box-shadow:0 8px 32px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.weather-main{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.weather-info h2{font-size:2rem;margin-bottom:5px;color:#2d3436}.weather-info p{color:#636e72;margin-bottom:10px}.temperature{display:flex;align-items:center;gap:20px}#currentTemp{font-size:4rem;font-weight:700;color:#0984e3}.temp-details p{margin:5px 0}#weatherDescription{font-size:1.2rem;font-weight:500;text-transform:capitalize;color:#2d3436}.weather-icon i{font-size:5rem;color:#f39c12}.weather-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.detail-item{display:flex;align-items:center;gap:10px;padding:15px;background:#74b9ff1a;border-radius:10px}.detail-item i{color:#0984e3;width:20px}.detail-item span:last-child{margin-left:auto;font-weight:700}.forecast{background:#fffffff2;border-radius:20px;padding:30px;box-shadow:0 8px 32px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.forecast h3{margin-bottom:20px;color:#2d3436;font-size:1.5rem}.forecast-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}.forecast-item{background:#74b9ff1a;padding:20px;border-radius:15px;text-align:center;transition:transform .3s ease}.forecast-item:hover{transform:translateY(-5px)}.forecast-day{font-weight:700;margin-bottom:10px;color:#2d3436}.forecast-icon{font-size:2.5rem;margin:10px 0;color:#f39c12}.forecast-temps{display:flex;justify-content:space-between;margin-top:10px}.forecast-high{font-weight:700;color:#e17055}.forecast-low{color:#74b9ff}.forecast-desc{font-size:.9rem;color:#636e72;text-transform:capitalize;margin-top:5px}.hidden{display:none!important}@media (max-width: 768px){.container{padding:15px}.header h1{font-size:2rem}.weather-main{flex-direction:column;text-align:center;gap:20px}.temperature{flex-direction:column;gap:10px}#currentTemp{font-size:3rem}.weather-details,.forecast-container{grid-template-columns:1fr}}@media (max-width: 480px){.search-container{flex-direction:column;border-radius:15px}#cityInput,#searchBtn{border-radius:10px}.current-weather,.forecast{padding:20px}}