*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}body{background:linear-gradient(135deg,#4facfe,#00f2fe);justify-content:center;align-items:center;min-height:100vh;display:flex}h1{color:#222;font-size:1.75rem}p{line-height:1.4}.app{width:100%;padding:20px}.weather-container{text-align:center;background:#fff;border-radius:18px;width:100%;max-width:420px;padding:30px;transition:all .3s;box-shadow:0 12px 30px #0000002e}.weather-container h1{color:#333;margin-bottom:10px}.weather-container p{color:#666;margin-bottom:20px;font-size:14px}.search-box{gap:10px;margin-bottom:20px;display:flex}.search-box input{border:1px solid #ddd;border-radius:10px;outline:none;flex:1;padding:12px;transition:all .2s}.search-box input:focus{border-color:#4facfe;box-shadow:0 0 5px #4facfe66}.search-box button{color:#fff;cursor:pointer;background:#4facfe;border:none;border-radius:10px;padding:12px 16px;font-weight:600;transition:all .2s}.search-box button:hover{background:#1e90ff;transform:translateY(-1px)}.search-box button:active{transform:scale(.98)}.search-box button:disabled{cursor:not-allowed;background:#a0cfff}.weather-card{background:linear-gradient(135deg,#f7f9fc,#eef3ff);border-radius:14px;margin-top:20px;padding:25px;transition:all .3s;animation:.4s ease-in-out fadeIn;box-shadow:0 8px 18px #00000014}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.weather-card h2{color:#333;margin-bottom:10px}.weather-card img{width:90px;height:90px}.weather-card p{color:#444;margin:6px 0}.error{color:red;margin-top:10px}.loading{color:#444;margin-top:10px}@media (width<=480px){.weather-container{padding:20px}.search-box{flex-direction:column}.search-box button{width:100%}}